蚂蚁设计重置选择 [英] Ant Design reset select

问题描述

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

I have 2 <Select>'s. The values in the second are dependant on the selection made on the first. When I change the selected item in the first, the available options on the second update. But if I already have a selection made on the second, that option remains selected even if it isn't supposed to be available based on a change to the first select.

更改第一选择后，如何重置第二选择而不选择任何内容?

How can I reset the second select to have nothing selected when a change is made to the first 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>

推荐答案

您需要查看协调控制示例.您只需在第一个 onChange 方法中使用 setFieldsValue 即可设置第二个选择字段的值.

You need to take a look at Coordinated Controls example mentioned on ant-design page. You can simply use setFieldsValue in your first onChange method to set the value of second select field.

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

我创建了一个沙盒演示.

这篇关于蚂蚁设计重置选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！