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

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

内容简介:发现

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来说还是希望稳定尽可能能够完整一点吧。当然这里自己踩过这个坑之后下次肯定就记得了,这里也记录一下,万一有人遇到相同的问题呢。

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

查看所有标签

猜你喜欢:

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

Scrum敏捷软件开发

Scrum敏捷软件开发

Mike Cohn / 廖靖斌、吕梁岳、陈争云、阳陆育 / 清华大学出版社 / 2010-11 / 69.00元

《Scrum敏捷软件开发》是敏捷联盟及Scrum联盟创始人之一、敏捷估算及计划的鼻祖Mike Cohn三大经典著作中影响最为深厚的扛鼎之作,也是全球敏捷社区中获得广泛肯定的企业敏捷转型权威参考。作者花四年时间,把自己近十五年的敏捷实践经验,特别是近四年中针对各种敏捷转型企业的咨询和指导工作,并结合旁征博引的方式,从更高的思想层次对敏捷与Scrum多年来的经验和教训进行深入而前面的梳理和总结,最终集......一起来看看 《Scrum敏捷软件开发》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

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

HSV CMYK互换工具