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部分。