反应<typeahead>获取选定的数组 object id</typeahead>

Question

我有一个数组

lookuplist = [
  { name: "Dave", id: 4780127, capital: "Montgomery", region: "South" },
  { name: "Jessie", id: 710249, capital: "Juneau", region: "West" },
  { name: "Steven", id: 6392307, capital: "Phoenix", region: "West" },
];

我在表单中使用 Typeahead

<FormGroup>
  <label className="form-control-label" htmlFor="input-email">
    Account
  </label>
  <Typeahead
    id="input-account"
    onChange={setSelected}
    options={lookuplist}
    placeholder="Choose a Account..."
    selected={selected}
    filterBy={["name"]}
    labelKey={(lookuplist) => `${lookuplist.name} (${lookuplist.id})`}
  />
</FormGroup>

typeahead 的所有功能都运行良好，在 type ahead 中设置的值是name (id) ，它是一个label 键，我需要的只是所选选项的id 。

例如，如果我 select "Dave" 预输入值 = 4780127这是数组的 "id"。这样我就可以获得数组值的 "id"

代码： https://codesandbox.io/s/brave-sound-pzse0?file=/src/App.js

提前致谢。

Answer 1

我想我明白你的问题是什么，你想将选定的 id 保存到 state 而不是整个 object 对吗？

您可以尝试以下操作，因此添加一个 function 来处理更改：

const handleChange = value => {
    setSelected(value[0].id)
};

然后将 handleChange 传递给 onChange 道具，对于选定的道具，您可以根据保存的 id 过滤查找列表：

<FormGroup>
  <label className="form-control-label" htmlFor="input-email">
    Account
  </label>
  <Typeahead
    id="input-account"
    onChange={handleChange}
    options={lookuplist}
    placeholder="Choose a Account..."
    selected={lookuplist.filter(x => x.id === selected)}
    filterBy={["name"]}
    labelKey={(lookuplist) => `${lookuplist.name} (${lookuplist.id})`}
  />
</FormGroup>