Ant Design 重置选择

Question

我有 2 <Select> 的。第二个中的值取决于对第一个所做的选择。当我第一次更改所选项目时，第二次更新的可用选项。但是，如果我已经在第二个选项上做出了选择，那么即使根据对第一个选项的更改，该选项不应该可用，该选项也会保持选中状态。

当对第一个选择进行更改时，如何重置第二个选择以不选择任何内容？

首先选择：

 <FormItem {...formTailLayout}>
    <FormTitle>Operation</FormTitle>
    {getFieldDecorator('Operation', {
    rules: [
        {
        required: true
        }
    ]
    })(
    <Select
        showSearch
        placeholder="Select an option"
        onChange={this.handleOperationChange}
    >
        {operations.map(operation => (
        <Option value={operation.operation_id}>
            {operation.operation_name}
        </Option>
        ))}
    </Select>
    )}
</FormItem>

第二选择：

 <FormItem {...formTailLayout}>
    <FormTitle>Metric</FormTitle>
    {getFieldDecorator('Metric', {
    rules: [
        {
        required: true
        }
    ]
    })(
    <Select
        showSearch
        placeholder="Select an operation first"
        onChange={this.handleMetricChange}
    >
        {matrics
        .filter(
            metric => metric.operation_fk === operation_fk
        )
        .map(metric => (
            <Option value={metric.metric_name}>
            {metric.metric_name}
            </Option>
        ))}
    </Select>
    )}
</FormItem>

原文由 Kieran Quinn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要查看 ant-design 页面上提到的 Coordinated Controls 示例。您可以在第一个 onChange 方法中简单地使用 setFieldsValue 来设置第二个选择字段的值。

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

我创建了一个 沙盒演示。

原文由 Triyugi Narayan Mani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在antd中，类组件中，使用Ref，清除或重置选择列表值或表单项值

1. 添加 formRef = React.createRef(); 就在类组件下面，例如：

export default class TestClass extends Component { formRef = React.createRef(); }

1. 添加 ref={this.formRef} 在 <Form /> 这样的组件 <Form ref={this.formRef}/>

2. 在 btn click 或任何你想要的功能中添加这一行

this.formRef.current.setFieldsValue({ network: undefined });

1. 这里 network 在上面的步骤中是表单项的名称

<Form.Item name="network" label="Network"></Form.Item>

原文由 Lalit Garghate 发布，翻译遵循 CC BY-SA 4.0 许可协议