你需要看一下Ant Design页面上提到的协调控件的例子，你可以简单地在你的第一个onChange方法中使用setFieldsValue来设置第二个选择字段的值。

handleOperationChange = () => {
    this.props.form.setFieldsValue({
        Metric: undefined
    })
}

我创建了一个sandbox demo。

在antd中，在类组件中，使用引用，清除或重置选择列表值或表单项值
1.在类组件下面添加formRef = React.createRef();，例如：
export default class TestClass extends Component { formRef = React.createRef(); }
1.将ref={this.formRef}添加到<Form />组件中，如下所示<Form ref={this.formRef}/>
1.添加这一行在btn单击或在任何功能你想要的
this.formRef.current.setFieldsValue({ network: undefined });
1.其中，上一步中的network是表单项的名称
<Form.Item name="network" label="Network"></Form.Item>

在handleOperationChange方法中使用resetfileds，这将重置第二个选择框。

this.props.form.resetFields('Metric');

<Select
    className="mt-3"
    style={{ width: "100%" }}
    placeholder="Select your Sub Category"
    onChange={handleChangeSubCategory}
    disabled={categoryGroup.category === null}
    value={categoryGroup.subcategory || undefined}
 >
    {subCategory.map(item => (
      <Option key={item} value={item} label={item}>
         <div>
            <Avatar style={{ background: "#10899e" }}>
               {item[0]}
            </Avatar>{" "}
                {item}
             </div>
       </Option>
       ))}
</Select>

如果使用功能组件，则可以使用Form：

const [form] = Form.useForm()

并且可以如下清除值：

const someMethodToClearCurrentSelection = () => {
    // ... the code is omitted for the brevity
    form.setFieldsValue({ fooProduct: undefined })
}

我们的控件是这样的：

<Form form={form} name="basic" onFinish={onFinish} layout="vertical">
<Form.Item
    key="fooProduct"
    name="fooProduct"
    label="Some product"
    className={s.fooContainer}
    rules={[
        {
            required: true,
            message: `Field 'Some produc' is required`,
        },
    ]}
>
    <Select
        showSearch
        optionFilterProp="children"
        filterOption={(input, option) =>
            option?.children.toLowerCase().includes(input.toLowerCase())
        }
        allowClear
        onChange={handleMarkClick}
    >
        {products.map((option) => (
            <Option key={option.id} value={option.id}>
                {option.name}
            </Option>
        ))}
    </Select>
</Form.Item>

Read more in antd docs here和examples while migrating from v3 to v4

你可以使用useEffect（）钩子。为你的表单定义一个useForm（）自定义钩子。例如：const [表单]=表单. useForm（）;'将第一个和第二个选择框 Package 在窗体内，并使用定义窗体上的输入。每当第一个选择框的输入发生变化时，清除useEffect（）钩子中的第二个选择框的值。例如：<Form.Item> to define the input on the form. And whenever the first select's input is changed, clear the 2nd select values in useEffect() hook. Example:

useEffect(() => {
    form.setFieldsValue({
      marketplace: [] //2nd select name
    });
  }, [selectedRegion]); //first select's value

这工作很适合我。