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来实现对表单项的回显。