重置 Ant Design 表单上的特定输入字段

Shu*_*Yen 4 forms 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 &&
                      categories.map((c) => (
                        <Option key={c._id} value={c._id}>
                          {c.name}
                        </Option>
                      ))}
                  </Select>
                </Form.Item>


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


Run Code Online (Sandbox Code Playgroud)

Jes*_* We 7

您没有显示整个表单,但由于您正在使用,form.resetFields()我假设您initialValues在表单标签中指定了一些表单。假设你有类似的东西

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

<Form
    initialValues={initvalues}
    ...
/>
Run Code Online (Sandbox Code Playgroud)

所做form.resetFields()的是将所有字段值设置回其initialValues. 那么,您想要的只是将该title字段重置为其初始值。

这可以通过以下方式完成

const handleCategoryChange = (e) => {
    form.setFieldsValue( { Title: initValues.Title } )
}
Run Code Online (Sandbox Code Playgroud)