【问题标题】:Reset a specific Input field on ant design form重置 ant design 表单上的特定输入字段
【发布时间】:2021-04-29 04:32:33
【问题描述】:

如何重置特定输入字段,在本例中为标题输入字段? 我知道如何重置所有字段(使用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
  };```


【问题讨论】:

    标签: reactjs forms antd


    【解决方案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 } )
    }
    

    【讨论】:

    • 你在哪里分配表格?
    • 刚刚找到const [form] = Form.useForm();
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-04-26
    • 2019-05-23
    • 2021-12-14
    • 2019-10-04
    • 2019-05-11
    • 1970-01-01
    • 2018-05-20
    相关资源
    最近更新 更多