Ant Design 重置选择 [英] Ant Design reset select
问题描述
我有 2 个 .第二个中的值取决于在第一个上所做的选择.当我在第一个更改所选项目时，第二个更新的可用选项.但是，如果我已经在第二个选项中进行了选择，那么即使根据对第一个选择的更改它不应该可用，该选项也会保持选中状态.
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>
推荐答案
需要看一下Coordinated Controls 示例在 ant-design 页面上提到.您可以简单地在第一个 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
})
}
我创建了一个沙盒演示.
这篇关于Ant Design 重置选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
