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

最新推荐文章于 2024-09-26 21:52:31 发布

原创最新推荐文章于 2024-09-26 21:52:31 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

9 篇文章

订阅专栏

在使用antd-design的Form和Select组件时，发现设置Select的placeholder属性不起作用。经过排查，问题出在对表单项的处理上。官方文档建议通过设置初始化值来绑定组件，而非直接使用事件。在查看相关issues后，找到解决方案，解决方法是将Select的值设为undefined，而非null，这样才能正确显示placeholder。

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

起因

最近在用antd写表单的时候遇到个问题:Form,Select组件一起使用时,设置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属性，官方文档是这样讲的：
对表单内的组件使用onChange合成事件不介意使用setState以及value为组件绑定值，介意使用initialValue设置初始化值。所以我这里写的也是没问题的。
没办法了呀，遇到这种莫名其妙的问题只能去antd-github-issues去找有没有人提出过相同的问题了,搜了一下发现还真有！！！

修改自己的代码之后

<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>