反應<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>