antd 4: установка значения по умолчанию для Select с defaultValue, нельзя использовать initialValue

Question

В нашей довольно сложной форме у нас есть динамическое поле формы c (аналогично примеру в документации antd, за исключением использования поля Select). Мы используем initialValue для подачи данных формы из базы данных, теперь мы хотим, чтобы наши поля Select, которые добавляются динамически, имели значение по умолчанию.

Проблема заключается в том, что это невозможно чтобы добавить initialValue к полям, которые еще не были отрисованы, + форма не знает, сколько динамических c полей выбора будет добавлено.

Так что я инстинктивно прибегнул к свойству defaultValue в поле выбора, которое в моих глазах должен просто работать, но это не так. (в antd 4 отсутствует fieldDescriptor с значением defaultValue)

Возможно, этот пример лучше объяснит, что я пытаюсь сказать: https://codesandbox.io/s/thirsty-hamilton-m7bmc

Если вы добавите поле в примере и нажмите кнопку отправить, он будет жаловаться, что поле является обязательным. Однако там определенно есть значение, но, очевидно, не для состояния формы.

Я надеюсь, что кто-то еще сталкивался с подобной проблемой

Answer 1

Для выбранных компонентов требуется ЗНАЧЕНИЕ . Я вижу, что у вас есть defaultValue, но им также нужны такие свойства, как VALUE и ONCHANGE . Когда вы добавите их, выбор начнет работать правильно.

1). Лучше определить значение по умолчанию в свойстве VALUE, чтобы, если пользователь ничего не выбрал (выбранное значение не определено), значением по умолчанию будет то, что вы упомянули в следующем условии с троичным оператором:

value = {selectedValue? selectedValue: defaultValue}.

2). В свойстве onChange необходимо передать значение и обновить состояние с помощью этого значения:

onChange = {(value) => this.updateSelectedValue (value)}

import React, { PureComponent } from "react";
import { Form, Select } from "antd";

const { Option } = Select;
export default class DynamicFieldSet extends PureComponent {
    state = {
        selectedValue: undefined,
    }

    updateSelectedValue = value => this.setState({ selectedValue: value })

    render() {
        const { selectedValue } = this.state;
        return (
            <Form>
                    <Form.Item>
                        <Select
                            value={selectedValue ? selectedValue : "TAG"}
                            onChange={(value) => this.updateSelectedValue(value)}
                        >
                            <Option value="MARKER">Marker</Option>
                            <Option value="TAG">Tag</Option>
                            <Option value="FIELD">Field</Option>
                        </Select>
                    </Form.Item>
            </Form>
          );
    }
}