antd 4 表单中多选的默认值

Question

我无法为表单内的多选设置默认值。

用例：我创建了一个 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

Answer 1

如果我的问题是正确的，你需要在你的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属性添加到特定选项。

Answer 2

Form.Item现在支持 version 4.2.2 中的initialValue Form.Item ，可用于设置默认值。