时间戳

首页 > 解决方案 > 反应 | 蚂蚁设计选择默认值

javascript - 反应 | 蚂蚁设计选择默认值

问题描述

我在我的项目中使用蚂蚁设计。

在这里，我有一个选择作为动态字段。当我尝试为选择设置默认值时。它不起作用。

<Select defaultValue="lucy">
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>

我将默认值设置为lucy但它不起作用

复制代码：https ://codesandbox.io/s/6x3qv6wymr

标签： javascriptreactjsantd

解决方案

根据文档，您不应该使用valueor defaultValuewith getFieldDecorator。

被getFieldDecorator包裹后，表单控件中会添加value（或valuePropName定义的其他属性）onChange（或trigger定义的其他属性）props，表单数据的流动将由Form处理，这将导致：

  1. 你不应该使用 onChange 来收集数据，但你仍然可以监听 onChange(等等) 事件。

  2. 您不能通过 value defaultValue 属性设置表单控件的值，而应该在 getFieldDecorator 中使用 initialValue 设置默认值。

  3. 您不应该手动调用 setState，请使用 this.props.form.setFieldsValue 以编程方式更改值。

因此，在您的代码中，您需要定义initialValue而不是defaultValue如下所示：

{getFieldDecorator(`names[${k}]`, {
        validateTrigger: ["onChange", "onBlur"],
        initialValue: "lucy",
        rules: [
          {
            required: true,
            whitespace: true,
            message: "Please input passenger's name or delete this field."
          }
        ]
      })(
        <Select>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="Yiminghe">yiminghe</Option>
        </Select>
      )}

您可以在codesandbox.io上查看工作演示。

推荐阅读