Reactjs React-ant设计仅重置一个输入字段

我正在使用我的项目进行React-ant设计4。我在表格上有一些冲突。我想知道如何只重置一个（注意）字段，任何人都知道解决方案

谢谢

代码在这里

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Select } from 'antd';
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const Demo = () => {
  const [form] = Form.useForm();

  const onGenderChange = (value) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({
          note: 'Hi, man!',
        });
        return;

      case 'female':
        form.setFieldsValue({
          note: 'Hi, lady!',
        });
        return;

      case 'other':
        form.setFieldsValue({
          note: 'Hi there!',
        });
        return;
    }
  };

  const onFinish = (values) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="note"
        label="Note"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="gender"
        label="Gender"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select
          placeholder="Select a option and change input text above"
          onChange={onGenderChange}
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
      >
        {({ getFieldValue }) => {
          return getFieldValue('gender') === 'other' ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
          ) : null;
        }}
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
        <Button type="link" htmlType="button" onClick={onFill}>
          Fill form
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Form，Input，Button，Select}；
const{Option}=Select；
常量布局={
labelCol：{
跨度：8，
},
包装纸：{
跨度：16，
},
};
const tailLayout={
包装纸：{
抵销：8，
跨度：16，
},
};
常量演示=（）=>{
const[form]=form.useForm（）；
常量onGenderChange=（值）=>{
开关（值）{
个案"男":
form.setFieldsValue({
注：“嗨，伙计！”，
});
返回；
“女性”一案：
form.setFieldsValue({
注：“你好，女士！”，
});
返回；
“其他”案例：
form.setFieldsValue({
注意：“你好！”，
});
返回；
}
};
常量onFinish=（值）=>{
console.log（值）；
};
常量onReset=（）=>{
form.resetFields（）；
};
常量onFill=（）=>{
form.setFieldsValue({
注意：“你好，世界！”，
性别：'男性'，
});
};
返回(
男性的
女性的
其他
prevValues.gender！==currentValues.gender}
>
{（{getFieldValue}）=>{
返回getFieldValue（'性别'）=='其他'(
)：null；
}}
提交
重置
填表
);
};
ReactDOM.render（，document.getElementById（'container'））；

您可以在

表单中添加namePath数组。resetFields

调用

const onReset = () => {
   form.resetFields(["note"]);
};

只需使用您的代码对其进行测试，即可正常工作：

---

更多信息：

谢谢，这对我很有用