关于antd form组件下的item封装问题

最近项目里有一个steps步骤条页面，每个step是一个表单，最后要把数据整体提交到后台。项目里是把form表单下的item封装成单个组件，统一引入：

类似于：

父组件：

 

子组件：

 

这样写有个问题，就是当子组件触发clear时，父组件formitem的值没有监听到变化。查找了一下原因，就是因为子组件input外面包裹了div标签，导致清空后的值被阻断，无法告诉父组件。看了antd API，form表单有一个自定义表单控件：

这里面代码意思是自定义控件要触发onChange 方法，才能把更新组件值。所以之后代码改成这样，是可以的：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button } from 'antd';

const TestInput = ({ onBlur }) => {
  const onNumberChange = (e) => {
    onBlur(e.target.value);
  };
  return (
    <span>
      <Input
        allowClear="true"
        type="text"
        onChange={onNumberChange}
        style={{
          width: 100,
        }}
      />
    </span>
  );
};

const CustomInput = () => {
  const { Item } = Form;
  return (
    <Item name="name" label="name" trigger="onBlur">
      <TestInput />
    </Item>
  );
};

const Demo = () => {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Received values from form: ', values);
  };

  return (
    <Form
      form={form}
      name="customized_form_controls"
      layout="inline"
      onFinish={onFinish}
    >
      <CustomInput />
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

 也就是，如果想封装form 下的item为子组件，需要在item第一级子元素包裹一层组件，才可以正常获取到子组件值的变化。这样就需要包裹两层子组件。如果表单内容特别多，感觉有点麻烦。。。这是自己做项目的一点小经验。有可能说的不对，欢迎讨论～