设置选择多个组件的默认初始值

Question

使用选择组件我很难设置初始值。 作为文档。我想假设只用字符串| number [] | number []来填充值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

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

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"}
]