Выбор настроек Ant Design

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

Вам нужно взглянуть на пример Coordinated Control , упомянутый на странице ant-design. Вы можете просто использовать setFieldsValue в своем первом onChange методе, чтобы установить значение второго поля выбора.

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

Я создал демо-версию sandbox .

Answer 2

Внутри метода handleOperationChange используйте resetfileds, это сбросит ваш второй блок выбора.

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