Сброс определенного поля ввода в форме ant design

#reactjs #forms #antd

#reactjs #формы #antd

Вопрос:

Как мне сбросить конкретное поле ввода, в данном случае поле ввода заголовка? Я знаю, как сбросить все поля (используя form.resetFields() ), но не конкретное поле в 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 amp;amp;
                      categories.map((c) => (
                        <Option key={c._id} value={c._id}>
                          {c.name}
                        </Option>
                      ))}
                  </Select>
                </Form.Item>


  const handleCategoryChange = (e) => {
    ///reset Title field
  };```


 

Ответ №1:

Вы не показываете всю форму, но поскольку вы используете form.resetFields() , я предполагаю, что вы указываете некоторые initialValues из них в своем теге формы. Допустим, у вас есть что-то похожее на

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

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

Что form.resetFields() делает, так это возвращает всем значениям полей их initialValues . Тогда вы хотите сбросить только title поле до его начального значения.

Затем это может быть достигнуто с помощью

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

Комментарии:

1. где вы назначили форму?

2. только что найдено const [form] = Form.useForm();