时间戳

首页 > 解决方案 > 在选择标签中添加默认值选项

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

问题描述

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

<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

标签： reactjs

解决方案

您提供['Lucy']（大写）作为默认值，但选项中提供的值是 'lucy'、'jack' 和 'tom' 全部小写。这就是为什么Select将默认值视为另一个值的原因。

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

<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

推荐阅读