蚂蚁设计重置选择

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页面上提到的Coordinated Controls示例。您只需setFieldsValue在第onChange一种方法中使用即可设置第二个选择字段的值。handleOperationChange = () => {&nbsp; &nbsp; this.props.form.setFieldsValue({&nbsp; &nbsp; &nbsp; &nbsp; Metric: undefined&nbsp; &nbsp; })}我创建了一个沙盒演示。

Answer 2

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