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>

Answer 1

您需要查看ant-design页面上提到的sandbox demo示例。您只需在第一种setFieldsValue方法中使用onChange即可设置第二个选择字段的值。

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

我创建了一个{{3}}。

Answer 2

在handleOperationChange方法内部使用resetfileds，这将重置您的第二个选择框。

this.props.form.resetFields('Metric');

Answer 3

<Select
    className="mt-3"
    style={{ width: "100%" }}
    placeholder="Select your Sub Category"
    onChange={handleChangeSubCategory}
    disabled={categoryGroup.category === null}
    value={categoryGroup.subcategory || undefined}
 >
    {subCategory.map(item => (
      <Option key={item} value={item} label={item}>
         <div>
            <Avatar style={{ background: "#10899e" }}>
               {item[0]}
            </Avatar>{" "}
                {item}
             </div>
       </Option>
       ))}
</Select>

Answer 4

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

在类组件下方添加const NoneReChar = (str) => { const tempArr = str.split(''); let result = 'Not Found'; for (let index = 0; index < tempArr.length; index++) { const firstIndex = tempArr.indexOf(tempArr[index]); const lastIndex = tempArr.lastIndexOf(tempArr[index]); if (firstIndex === lastIndex) { result = tempArr[index]; break; } } return result; } console.log(NoneReChar("aaaabbbeccc"));，例如：

formRef = React.createRef();
在export default class TestClass extends Component { formRef = React.createRef(); }组件中添加ref={this.formRef}，例如<Form />
在btn点击或您想要的任何功能中添加此行

<Form ref={this.formRef}/>

上面步骤中的this.formRef.current.setFieldsValue({ network: undefined });是表单项的名称

network

蚂蚁设计重置选择

4 个答案: