React antd Form表单项自定义组件

父组件

import React from 'react';
import Son from './Son';
const Farther = (props) => {

  const [form] = Form.useForm();

  const { Item } = Form;

  return (
    <div>
      <Form
        name="form"
        form={form}
      >
        <Item
          name="test"
          label="测试"
        >
          <Son />
        </Item>
      </Form>
    </div>
  )
}

export default Farther;

子组件——自定义表单项组件

import React from 'react';
import { Input } from 'antd';

const Son = (props) => {
  return (
    <div>
      <Input onChange={e => {
        props.onChange(e.target.value);
      }}
　　　　value={props.value}
      />
    </div>
  )
}

export default Son;

这样可以实现父组件获取到test表单项的值，父组件也可以用setFieldsValue来实现对表单项的回显。

补充：使用自定义表单组件，能够自动识别，所以除了Input自带的onChange、value外，其他的API

也是可以用的，在调用自定义表单组件的时候传递过去就可以了，能使用的API具体看Antd官网API部分。