我有 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>
最佳答案
你需要看看Coordinated Controls ant-design 页面上提到的示例。您可以在第一个 onChange
方法中简单地使用 setFieldsValue
来设置第二个选择字段的值。
handleOperationChange = () => {
this.props.form.setFieldsValue({
Metric: undefined
})
}
我创建了一个 sandbox demo .
关于javascript - Ant Design 重置选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55863880/