Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reset a specific Input field on ant design form

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
  };```


like image 210
Shugi Yen Avatar asked Oct 13 '25 00:10

Shugi Yen


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 } )
}
like image 139
Jesper We Avatar answered Oct 14 '25 13:10

Jesper We