antd 4 中多选的默认值答案

【问题标题】：default value for multiple select in form antd 4antd 4 中多选的默认值
【发布时间】：2020-04-16 00:56:57
【问题描述】：

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

用例： 我创建了一个反应组件，它使用我在每种形式中需要的一些默认道具呈现一个选择。现在我想从 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;

问题是当我设置选择的 defaultValue 属性时，该值显示在 UI 中，但是当提交表单时，默认值被忽略并且选择字段的值保持为 undefined

【问题讨论】：

标签： javascript reactjs antd

【解决方案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 属性添加到特定选项。

【讨论】：

不，你没有答对问题。例如如果没有选择任何项目，FormSelect 的值应该给出一个空数组，但 antd 中选择的实际默认值是undefined。那么，您将如何处理这种情况。为此，您需要设置一些默认值。
另外，antd Select.Option 不提供任何 selected 属性
在<Select /> 中传递defaultValue 属性是否可以解决您的问题？尝试将一个空数组传递给它。 ant.design/components/select/#Select-props
您的defaultValue 是根据mode 的值设置的。尝试从一开始就将其分配为一个空数组，而不是有条件地。
同样的问题！有什么解决办法吗？

【解决方案2】：

Form.Item 现在在 4.2.2 版本中支持 initialValue 属性，可用于设置默认值。

【讨论】：