Javascript 反应 | Ant设计选择默认值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/52425293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 04:59:22  来源:igfitidea点击:

React | Ant design select default value

javascriptreactjsantd

提问by Selvin

I'm using ant designin my project.

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

Here I have a select as a dynamic field. when I trying to set default value for select. It doesn't work.

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

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

I'm setting defaultvalue as lucyBut it doesn't work

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

Reproduction Code: https://codesandbox.io/s/6x3qv6wymr

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

回答by Triyugi Narayan Mani

According to the documentation, you should not use valueor defaultValuewith getFieldDecorator.

根据文档,您不应该使用valuedefaultValue使用getFieldDecorator.

After wrapped by getFieldDecorator, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls,the flow of form data will be handled by Form which will cause:

  1. You shouldn't use onChange to collect data, but you still can listen to onChange(and so on) events.

  2. You can not set value of form control via value defaultValue prop, and you should set default value with initialValue in getFieldDecorator instead.

  3. You shouldn't call setState manually, please use this.props.form.setFieldsValue to change value programmatically.

被getFieldDecorator包裹后,value(或valuePropName定义的其他属性)onChange(或trigger定义的其他属性)props会被添加到表单控件中,表单数据流将由Form处理,导致:

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

  2. 您不能通过 value defaultValue prop 设置表单控件的值,而应该使用 getFieldDecorator 中的 initialValue 设置默认值

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

So, in your code you need to define initialValueinstead of defaultValueas given below:

因此,在您的代码中,您需要定义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="Hyman">Hyman</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="Yiminghe">yiminghe</Option>
        </Select>
      )}

You can check the working demo on codesandbox.io.

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

回答by Denis Kuratovich

Problem in 'getFieldDecorator', if you remove it, everything ok. So search pb there, no problem with React|Ant

'getFieldDecorator' 中的问题,如果您将其删除,则一切正常。所以在那里搜索 pb,React|A​​nt 没问题

回答by amin motamedi

for future visitors, it can be helpful, check this

对于未来的访问者,这可能会有所帮助,请检查此

getFieldDecorator initial value

getFieldDecorator 初始值