antd-design Form,Select联合使用 placeholder 不起作用问题

栏目: 前端 · 发布时间: 4年前

内容简介:发现

antd-design Form,Select联合使用 placeholder 不起作用问题

起因

  • 最近在用 antd 写表单的时候遇到个问题: Form , Select 组件一起使用时,设置 Select 组件的 placeholder 属性并没有起作用。如下图:

antd-design Form,Select联合使用 placeholder 不起作用问题

antd-design Form,Select联合使用 placeholder 不起作用问题

发现 Select 组件的 placeholder 属性并没有起作用。

排查

  • 对照官方文档看了一下官方的代码
<Form.Item
          label="Gender"
        >
          {getFieldDecorator('gender', {
            rules: [{ required: true, message: 'Please select your gender!' }],
          })(
            <Select
              placeholder="Select a option and change input text above"
              onChange={this.handleSelectChange}
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
            </Select>
          )}
        </Form.Item>
  • 发现跟自己的代码唯一的区别就是我这里设置了这个表单项的 initialValue 属性,官方文档是这样讲的:

antd-design Form,Select联合使用 placeholder 不起作用问题

  • 对表单内的组件使用 onChange 合成事件不介意使用 setState 以及 value 为组件绑定值,介意使用 initialValue 设置初始化值。所以我这里写的也是没问题的。
  • 没办法了呀,遇到这种莫名其妙的问题只能去 antd-github-issues 去找有没有人提出过相同的问题了,搜了一下发现还真有!!!

antd-design Form,Select联合使用 placeholder 不起作用问题

  • 修改自己的代码之后
<Form.Item {...formItemLayout} label="证件类型">
            {getFieldDecorator('certType', {
              initialValue: publicAccount.certType ? publicAccount.certType : undefined,
              rules: [{ required: true, message: '请选择证件类型' }],
            })(
              <Select style={{ width: 280 }} placeholder="请选择证件类型" onChange={this.handleCertTypeChange}>
                <Option value="1">身份证</Option>
                <Option value="2">营业执照</Option>
              </Select>,
            )}
          </Form.Item>

antd-design Form,Select联合使用 placeholder 不起作用问题

总结

  • 开源有风险,使用需谨慎。当然不是说antd不好(真香)。对于一些api来说还是希望稳定尽可能能够完整一点吧。当然这里自己踩过这个坑之后下次肯定就记得了,这里也记录一下,万一有人遇到相同的问题呢。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

We Are the Nerds

We Are the Nerds

Christine Lagorio-Chafkin / Hachette Books / 2018-10-2 / USD 18.30

Reddit hails itself as "the front page of the Internet." It's the third most-visited website in the United States--and yet, millions of Americans have no idea what it is. We Are the Nerds is an eng......一起来看看 《We Are the Nerds》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具