#Antd#如何将自制组件与Form.item绑定

Question

我想像这样使用我的组件

<Form.item>
  <MyComponent />
</Form.item>

当我点击提交按钮时，我无法将 defaultValue 传递给 MyComponent 并且表单无法从 MyComponent 获取值。
我怎样才能解决这个问题？

Answer 1

要使用默认值，您可以使用 antd 的Form中的initialValues以及Form.Item中定义的name 。

例如：

<Form
  {...layout}
  name="basic"
  initialValues={{
    myComponent: "IntialTestValue"
  }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
>
  <Form.Item
    label="MyComponent"
    name="myComponent"

要使用自定义或第三方组件，您需要将您的组件绑定到一个value和onChange 。

例如：

const MyComponent = ({ value = {}, onChange }) => {
  const [inputValue, setInputValue] = useState(value);

  const onInputChange = e => {
    setInputValue(e.target.value);
    onChange(e.target.value);
  };

  return (
    <>
      <Input defaultValue={value} value={inputValue} onChange={onInputChange} />
    </>
  );
};

这是一个有效的CodeSandbox 。

另一个很好的例子可以在 int antd Form docs中找到： CodeSandbox