[英]default value for multiple select in form antd 4
我无法为表单内的多选设置默认值。
用例:我创建了一个 React 组件,它使用我在每种形式中都需要的一些默认道具来呈现一个选择。 现在我想从 select 的defaultValue
为该选择设置默认值,而不是将initialValues
传递给每个表单。
我的反应组件看起来像:
import React, { Component } from 'react';
import { Form, Select } from 'antd';
class FormSelect extends Component {
render() {
const {name, label, rules, onSelect, disabled, options, mode} = this.props;
let defaultValue;
if (mode === 'tags' || mode === 'multiple'){
defaultValue = [];
}
return (
<Form.Item
hasFeedback
name={name}
label={label}
rules={rules}
>
<Select
showSearch
mode={mode}
tokenSeparators={[',']}
defaultValue={defaultValue}
onSelect={onSelect}
disabled={disabled}
>
{
options.map((op) => (
<Select.Option key={op.value} value={op.value} label={op.label}>
{op.label}
</Select.Option>
))
}
</Select>
</Form.Item>
);
}
}
export default FormSelect;
问题是当我设置 select 的defaultValue
,该值显示在 UI 中,但是当提交表单时,defaultValue 被忽略并且选择字段的值保持undefined
如果我的问题是正确的,你需要在你的options.map()
的回调中做这样的事情:
<Select.Option
selected={op.value === this.props.defaultValue ? true : false}
key={op.value}
value={op.value}
label={op.label}>
{op.label}
</Select.Option>
说明:如果选项的op.value
等于作为 props 传递的defaultValue
,则默认情况下将选择该选项。
React 足够聪明,可以根据值是true
还是false
来知道是否将selected
属性添加到特定选项。
Form.Item
现在支持 version 4.2.2 中的initialValue
Form.Item
,可用于设置默认值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.