antd 4: 用defaultValue為Select設置默認值，不能使用initialValue

Question

在我們相當復雜的表單中，我們有一個動態表單字段（類似於 antd 文檔中的示例，除了使用 Select 字段）。 我們使用 initialValue 從數據庫中提供表單數據，現在我們希望動態添加的 Select 字段具有默認值。

問題在於，無法向尚未呈現的字段添加 initialValue + form 不知道將添加多少個動態 Select 字段。

因此，我本能地使用了 Select 框上的 defaultValue 屬性，在我看來它應該可以正常工作，但它沒有。 （在 antd 4 中沒有帶 defaultValue 的 fieldDescriptor）

也許這個例子會更好地解釋我想說的： https : //codesandbox.io/s/thirsty-hamilton-m7bmc

如果您在示例中添加一個字段並點擊提交，它會抱怨該字段是必需的。 然而，它確實在那里有一個值，但顯然不是 Form 狀態。

我希望其他人也遇到過類似的問題

Answer 1

您的 Select 組件需要定義VALUE 。 我看到您有 defaultValue，但他們還需要諸如VALUE和ONCHANGE 之類的屬性。 當您添加它們時，選擇將開始正常工作。

1）。 最好在 VALUE 屬性中定義默認值，這樣如果用戶沒有選擇任何內容（所選值未定義），則該值將默認為您在以下條件中使用三元運算符提及的任何內容：

值={選定值？ selectedValue：默認值}。

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>
          );
    }
}