Form.Item包裹自定义组件，值被Form统一挟持

使用react antd的form组件，需要在其中包裹自定义子组件，但是该子组件的值能不能交给form组件统一管理呢？

• 用法就在这

不过直接这么贴图，你的体验肯定不够好，让我来举个例子。

父组件Father:

const Father: React.FC = () => {
  return (
    <div>
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        {/* 设备类型 */}
        <Form.Item required label="设备类型" name="source">
          <Son
            sourceList={sourceList}
            hasDevNo={hasDevNo}
            onChange={handleChange}   //<======= 注意这里
          />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

子组件Son：

const Son: React.FC = props => {
  // 选择设备类型
  const handleChange = item => {
    props.onChange(item.source);  // <===== 注意这里
  };

  return (
    <div className="device-type">
      {/* 设备source弹框 */}
      <Modal
        title="设备类型"
        visible={isModalVisible}
        onCancel={handleCancel}
        footer={null}
        width={750}
      >
        <Table
          columns={columns}
          dataSource={props?.sourceList}
          pagination={false}
        />
      </Modal>
    </div>
  );
};

总结：首先父组件将自定义子组件包裹在Form.Item中，暴露onChange方法。子组件通过该onChange方法将要绑定的值emit到父组件。（这里注意，父组件不需要接受该值，因为已经被form控件挟持，因为叫受控组件）

THE END!