Antd Form 自定义表单控件

首先我们直接在自定义组件中打印看一下props能得到什么：

 可以看到Form.Item向我们的自定义组件内部传递了一个value和一个onChange事件

那么我们可以在自己定义的组件内部维护好一个state，并且在这个state发生变化的同时调用props内得到的onChange事件。即：

const CusInput = (props) => {
  const [inputValue, setInputValue] = useState("");
  const triggerChange = (value) => {
    props.onChange(value);
  };
  const handleInputValueChange = (e) => {
    setInputValue(e.target.value);
    triggerChange(e.target.value);
  };
  return <Input value={inputValue} onChange={handleInputValueChange} />;
};

需要注意的时triggerChange里面传递的值，不能是setInputValue之后的inputValue，否则我们获取组件的值只能获取到上一次的值，而不是实时的值。

完整的代码实现如下：

import React, { useState } from "react";
import { createRoot