react-bootstrap-typeahead：如何在“OnChange”上获取属性值，我在表格单元格中使用 Typeahead

【问题标题】：react-bootstrap-typeahead: How to get attribute value on "OnChange" , I am using Typeahead in table cellreact-bootstrap-typeahead：如何在“OnChange”上获取属性值，我在表格单元格中使用 Typeahead
【发布时间】：2021-08-30 03:03:34
【问题描述】：

我在表格行中为发票项目使用 react-bootstrap-typeahead。

我的 json 就像 [{record_id:1,value="value1"},{record_id:2,value="value2"}] 在此基础上，我正在创建引导表。在表格单元格中，我添加了预先输入选择框来更改值并更新我的 json，

当我更改值时，我想用相关记录中的最新值更新我的 json 数组。但是在 onChange 中我们只得到选择的数组而不是事件对象，所以我找不到记录 id。

【问题讨论】：

标签： react-bootstrap-typeahead

【解决方案1】：

我创建了一个解决方案，我知道它不是最好的，但它对我有用。我已经设置了名为 currentLineItem 的状态，并且我在 react-bootstrap-typeahead 的“onFocus”事件上更新了这个值。在这个事件中，我得到一个事件对象。

const [currentLineItem, setCurrentLineItem] = useState(null);
const selectBoxOnFocus = (event) => {
    const rowId = event.target.parentNode.parentNode.parentNode.parentNode.getAttribute("data-id");
    setCurrentLineItem(rowId);
  };
const taxCalcChangeInRow = async (option) => {
    const rowId = currentLineItem;
    // my other code
  };
<SelectBox {/*(this is wrapper componat of typeahead)*/}
   data-id={row.id}
   name="inputTaxCalc"
   options={taxCalcOptions}
   OnChange={taxCalcChangeInRow}
   onFocus={selectBoxOnFocus}
/>

【讨论】：