antd 4：使用defaultValue为Select设置默认值，不能使用initialValue答案

【问题标题】：antd 4: setting a default value for Select with defaultValue, can't use initialValueantd 4：使用defaultValue为Select设置默认值，不能使用initialValue
【发布时间】：2020-02-13 09:37:44
【问题描述】：

在我们相当复杂的表单中，我们有一个动态表单字段（类似于 antd 文档中的示例，除了使用 Select 字段）。我们使用 initialValue 从数据库中提供表单数据，现在我们希望动态添加的 Select 字段具有默认值。

问题在于无法向尚未渲染的字段添加 initialValue + 表单不知道将添加多少动态 Select 字段。

因此，我本能地使用了 Select 框上的 defaultValue 道具，在我看来它应该可以正常工作，但它没有。（在 antd 4 中没有带 defaultValue 的 fieldDescriptor）

也许这个例子能更好地解释我想说的： https://codesandbox.io/s/thirsty-hamilton-m7bmc

如果您在示例中添加一个字段并点击提交，它会抱怨该字段是必需的。然而，它确实有一个价值，但显然不是 Form 状态。

希望其他人也遇到过类似的问题

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您的 Select 组件需要定义 VALUE。我看到您有 defaultValue，但它们还需要 VALUE 和 ONCHANGE 等属性。当您添加它们时，选择将开始正常工作。

1)。最好在 VALUE 属性中定义默认值，这样如果用户没有选择任何内容（选择的值未定义），该值将默认为您在以下条件中使用三元运算符提到的任何值：

value={selectedValue ?选定值：默认值}。

2)。在 onChange 属性中，您需要传递 value 并使用该值更新状态：

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

【讨论】：