Reset a specific Input field on ant design form

user_14203412 0
Viewed 3841

How do I reset a specific input field, in this instance, title input field? I know how to reset all fields (using form.resetFields()) but not a specific field on ant design

 <Form.Item name='Title' label='Title'>
                  <Input value={title} onChange={handleChange('title')} />
                </Form.Item>
<Form.Item name='Category' label='Category'>
                  <Select
                    placeholder='Select a category'
                    style={{ width: 420 }}
                    onChange={handleCategoryChange}
                  >
                    {categories.length > 0 &&
                      categories.map((c) => (
                        <Option key={c._id} value={c._id}>
                          {c.name}
                        </Option>
                      ))}
                  </Select>
                </Form.Item>


  const handleCategoryChange = (e) => {
    ///reset Title field
  };```
antd reactjs forms
1 Answers

You are not showing the whole form, but since you are using form.resetFields() I am assuming that you are specifying some initialValues in your form tag. Let us say you have something similar to

const initValues = {
    Title: "Foo",
    Category: 123,
    ...
}

<Form
    initialValues={initvalues}
    ...
/>

What form.resetFields() does is set all field values back to their initialValues. What you want, then, is to reset only the title field to its initial value.

This can then be accomplished by

const handleCategoryChange = (e) => {
    form.setFieldsValue( { Title: initValues.Title } )
}
user_28464630
Related