Taro微信小程序使用表单组件rc-field-form

安装

rc-field-form

yarn add rc-field-form

使用

import { View, Button, Input } from "@tarojs/components";
import Form, { Field, useForm } from "rc-field-form";

export default function InstallParameter() {
  const [form] = useForm();

  const formSubmit = e => {
    console.log(e)
  }

  return (
    <View>
      <Form
        form={form}
        component={false}
        onFinish={formSubmit}
      >
        <View>
          <Field name="name" trigger="onInput">
            <Input type='text' placeholder='请输入' />
          </Field>
        </View>

        <Button type="primary"
          onClick={() => {
            form.submit();
          }}
        >
          提交
        </Button>
      </Form>
    </View>
  );
}

注意

Field上的trigger="onInput"需要加上，否则有可能submit获取不到value数据，如果加了依然获取不到，则可以尝试 其中的Input如下改写为如下方式：

<Field name="name" trigger="onInput">
  {(props) => <Input onInput={props.onInput} value={props.value} />}
</Field>