蚂蚁设计重置选择

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 = () => {

    this.props.form.setFieldsValue({

        Metric: undefined

    })

}

我创建了一个沙盒演示。

Answer 2

<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>