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

Question

I want to use my component like this

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

I can't pass the defaultValue to MyComponent and the Form can't get the value from MyComponent when I hit the submit button.
How can I fix this?

Answer 1

For using a default value you can use initialValues from antd's Form together with the in Form.Item defined name .

Eg:

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

To use custom or third party component you need bind your component to a value and onChange .

Eg:

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} />
    </>
  );
};

Here is a working CodeSandbox .

Another good example can be found int antd Form docs : CodeSandbox