我有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>
6条答案
按热度按时间s6fujrry1#
你需要看一下Ant Design页面上提到的协调控件的例子,你可以简单地在你的第一个
onChange
方法中使用setFieldsValue
来设置第二个选择字段的值。我创建了一个sandbox demo。
4ngedf3f2#
在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>
gojuced73#
在handleOperationChange方法中使用resetfileds,这将重置第二个选择框。
qij5mzcb4#
mbyulnm05#
如果使用功能组件,则可以使用
Form
:并且可以如下清除值:
我们的控件是这样的:
Read more in antd docs here和examples while migrating from v3 to v4
lpwwtiir6#
你可以使用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:
这工作很适合我。