Form

版本要求:

@ray-js/ray≥0.5.10

描述

表单容器，用于收集并提交其内部控件的输入值。

属性

属性	类型	必填	默认值	说明
		否	-	携带 form 中的数据，提交时触发
		否	-	表单重置时触发

示例代码

基础用法

import React, { useState } from 'react';
import { Button, Input, Switch, View, Form, Text } from '@ray-js/ray';

export default function () {
  const [resultData, setResultData] = useState({});

  return (
    <View style={{ padding: '20px' }}>
      <Form
        onSubmit={(e) => {
          console.log('提交表单:', e.detail.value);
          setResultData(e.detail.value);
        }}
        onReset={() => {
          console.log('重置表单');
          setResultData({});
        }}
      >
        <View style={{ marginBottom: '16px' }}>
          <Text>开关:</Text>
          <Switch name="switch" />
        </View>
        <View style={{ marginBottom: '16px' }}>
          <Text>输入框:</Text>
          <Input name="input" placeholder="请输入" />
        </View>
        <Button formType="submit" type="primary">
          提交
        </Button>
        <Button formType="reset" style={{ marginTop: '10px' }}>
          重置
        </Button>
      </Form>
    </View>
  );
}