只将一个键传递给状态而不是所有对象答案

【问题标题】：Pass only a key into state not all object只将一个键传递给状态而不是所有对象
【发布时间】：2021-05-27 09:40:15
【问题描述】：

我尝试只选择一个 id 并为 classId 设置状态，但我得到了一个对象，我们该如何解决它？

<Typeahead
    clearButton
    id="basic-typeahead-multiple"
    multiple
    onChange={(id) => setClassId(id)}
    labelKey="name"
    valueKey="id"
    options={[
        { id: 1, name: "10A" },
        { id: 2, name: "10B" },
        { id: 3, name: "10C" },
    ]}
    placeholder="select class"
    selected={classId}
/>;

我认为我的状态将是 classId = [ 1, 2, 3 ] 但我得到了 classId = [ { id: 1, name: "10A" }, { id: 2, name: "10B" }, { id ：3，名称：“10C”}]

非常感谢。

【问题讨论】：

onChange={(option) => setClassId(option?.id)}

标签： reactjs react-bootstrap-typeahead

【解决方案1】：

这两个答案都不适用于multiple，因为两者都只是选择第一项并且不会返回，例如：[1, 2, 3]，如问题中所述。相反，请尝试：

<Typeahead
  ...
  onChange={(selected) => {
    const ids = selected.map(s => s.id);
    setClassId(ids);
  }}
/>

请注意，设置 selected={classId} 将无法正常工作，因为没有任何项目与传递给 options 的项目匹配。

另见this related issue。

【讨论】：

【解决方案2】：

是的，因为 onChange 有一个名为“selected”的参数，它是一个数组。在你的代码中写成“id”。

请参考他们的 API 文档here

如果您想获取所选项目的 id，可以这样做：

<Typeahead
    clearButton
    id="basic-typeahead-multiple"
    multiple
    onChange={(arrItem) => setClassId(arrItem[0].id)}
    labelKey="name"
    valueKey="id"
    options={[
        { id: 1, name: "10A" },
        { id: 2, name: "10B" },
        { id: 3, name: "10C" },
    ]}
    placeholder="select class"
    selected={classId}
/>;

【讨论】：

【解决方案3】：

onChange: Invoked when the set of selections changes (ie: an item is added or removed).为了保持一致性，即使未启用多选，selected 始终是一个选择数组。（已选择：Array

文档：here

<Typeahead
    clearButton
    id="basic-typeahead-multiple"
    multiple
    onChange={(classes) => setClassId(classes[0].id)}
    labelKey="name"
    valueKey="id"
    options={[
        { id: 1, name: "10A" },
        { id: 2, name: "10B" },
        { id: 3, name: "10C" },
    ]}
    placeholder="select class"
    selected={classId}
/>;

【讨论】：