为 select 多个组件设置默认初始值

Question

使用 select 组件，我很难尝试设置初始值。作为文档。说我假设只用 string|number|string[]|number[] 填充 value prop。现在的问题是我需要在输入中显示文本并在提交时发送一个 id 值，但是这样你显示的值与你发送的值相同。

<Select
        mode="multiple"
        defaultValue={tags} // => would need something like tags = [{id: 1, name: "Science"}]
        placeholder="Select tags"
        onSearch={this.fetchTags}
        onChange={this.handleChange}
        style={{ width: '100%' }}
      >
        {tags.map(tag => <Option value={tag.id} key={tag.id}>{tag.name}</Option>)}
      </Select>

Answer 1

所以 "labelInValue" 是我真正需要的，以防其他人遇到同样的问题。

Answer 2

您可以使用 value 而不是 defaulValue。这是我项目中的示例代码：

const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
            <span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
        </Select.Option>
    )

return (
    ....
    <Select
        mode="multiple"
        value={this.tasksStore.filters.selected.state.map(d => d)}
        onChange={this.handleTasksStatus}
        optionLabelProp="title"
    >
        {stateTasksOptions}
    </Select>
    ....
)

还有一些 css 用于着色。

结果:

this.tasksStore.filters.init.state 看起来像：

state = [
    {id: "done", title: "Исполнена", help: "исполнены после 24.04.2017"},
    {id: "active", title: "В работе", help: "текущие задачи"},
    {id: "planned", title: "Запланирована", help: "задачи на будущее"},
    {id: "missed", title: "Просрочена", help: "срок исполнения истек"},
    {id: "archived", title: "Архив", help: "выполнены ранее 24.04.2017"}
]

为 select 多个组件设置默认初始值

Setting default initial values for select multiple component

antd