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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。