如何从 React 中的 map 函数中获取数组 map 的索引

Question

我正在做一个 React Typescript 项目。在这里，我需要将数组 map() 的索引获取到另一个函数。

        <select className="form-control" value={cbnState} onChange={(e) => showDemographicInfo(e)}>
           {cbnArray.map((item: any, index:any) => (
              <option value={item.cbn}>{item.cbn} | {item.unit} | {index}</option>
            ))}
        </select>

在这里我想将精简索引传递给 OnChange 函数 (showDemographicInfo)

这是onChange函数的代码

const showDemographicInfo = (event: any) => {    
if (cbnList.length > 1 && cbnState === COMBINED) {
  setLeftArrowClass(ClassModifier.IN);
  setRightArrowClass(ClassModifier.IN);
}
setCbnState(event.target.value);

if (event.target.value !== COMBINED) {
  updateUserId(event.target.value);
  setCombinedState(false);
  setUnit(unit);
} else {
  setCombinedState(true);
  updateUserId(cbnArray[1]);
}

console.log("Index ",cbnArray[]);

};

在这个cbnArray[]中我需要添加索引。比如cbnArray[索引值].

谁能告诉我该怎么做。试了很久也没找到解决方法

Answer 1

只需访问 select 元素的 selectedIndex 即可为您提供选定的索引

  const showDemographicInfo = (event: any) => {
    const select = event.target;
    console.log(select.selectedIndex);
  };

Working sandbox

如何从 React 中的 map 函数中获取数组 map 的索引

How to get the index of an array map , out of the map function in React

reactjs

map-function

react-typescript