Search code examples
reactjsformsantd

Antd form.setFieldsValue not re-rendering when Form.Item contains multiple elements

I'm trying to update the value of a Cascader field with an "onClick" event to no avail. Said Cascader is within a Form.Item element, using Antd Form Component.

After countless tries I located the source of the problem to be that Form.Item seems unable to update the field value when there are multiple elements within the Form.Item tag.

For example (Simplified):

<Form.Item>
    <Cascader onChange=.../>
    <Button onClick=.../>
</Form.Item>

Doesn't work

While

<Form.Item>
    <Cascader onChange=.../>
</Form.Item>
<Button onClick=.../>

Does work.

And with "work" I mean that both, the form stores and the field displays the value.

I made a codesandbox with the example: https://codesandbox.io/s/priceless-yonath-p10mye?file=/src/App.tsx

So, my question would be if there is a way to make this work with Form.Item containing multiple elements? Because if it doesn't it would force me to disassemble a lot of my components.

Solution

  • you can convert those two input fields into a single customized form control like this:

    <Form.Item>
    <Cascader onChange=.../>
    <Button onClick=.../>
</Form.Item>

    to

    <Form.Item>
    <ColorComponent />
</Form.Item>

const ColorComponent = (valuePropName, trigger) =>{
   //two components
}

    Here,ColorComponent will behave as an input field, and form.setFieldsValue will update the valuePropName of the custom component.

    Here is the working example of your code: https://codesandbox.io/s/sleepy-dawn-ylp7x5?file=/src/App.tsx

    Here is the documentation: https://ant.design/components/form#components-form-demo-customized-form-controls