在选择标签中添加默认值选项

Question

我在应用程序中使用了选择标签：

<Select
    showSearch={false}
    defaultValue={["Lucy"]}
    mode="multiple"
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>,
  document.getElementById("container")

我想为此Select设置默认的选定值，以得到如下内容：

因此，当我第一次打开该下拉菜单时，我希望以图片中的方式选择默认值。我尝试了defaultValue，但无法按照我的描述进行操作。，那么，如何实现我上面描述的内容？
演示：https://codesandbox.io/s/select-with-search-field-ant-design-demo-4f9op?file=/index.js:410-955

Answer 1

您正在提供['Lucy']（大写）作为默认值，但选项中提供的值分别为'lucy'，'jack'和'tom'，均为小写。这就是Select将默认值视为另一个值的原因。

解决方案要么提供与选项defaultValue={["lucy"]}中使用的默认值相同的值，要么如果您希望defaultValue也使用大写字母，则在Option中使用大写的值。

<Select
    showSearch={false}
    defaultValue={["lucy"]}
    mode="multiple"
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>,
  document.getElementById("container")

Codesandbox演示，codesandbox

Answer 2

选项值为“ lucy”，并且您将默认值设置为“ lucy”（带有大写字母）。因此，默认值不起作用。将默认值设置为“ lucy”。