• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0702/4849.html 1190000019634221

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

起因

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

image
image
发现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属性,官方文档是这样讲的:

image

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

image

  • 修改自己的代码之后
<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>

image

总结

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

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!