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