我正在撰寫一個 React 組件，它接受一些資料作為陣列并呈現它們。但是，我需要向它添加一些事件偵聽器。我將傳遞給事件偵聽器的函式應該取決于資料。基本上，渲染的專案及其行為應該完全由資料驅動。
我撰寫了這段添加事件偵聽器的代碼，但是它似乎一直在覆寫事件偵聽器，并且我總是從最后一次迭代中獲取函式。
顯示代碼片段
const App = () => {
const data = ['item1', 'item2', 'item3', 'item4', 'item5'];
const itemRef = React.useRef(data.map((x) => React.createRef(x)));
React.useEffect(() => {
for (var i = 0; i < itemRef.current.length; i ) {
// need to define a function here that will
// accept data[i] as a parameter.
// That unique function would be added
// to event listener on each iteration
itemRef.current[i].current.addEventListener('click', () => {
console.log(`clicked data:${i}`);
});
}
}, []);
return (
<div className="App">
{data.map((x, i) => {
return (
<div className='item' ref={itemRef.current[i]} key={data[i]}>
{x}
</div>
);
})}
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById("root")
);.App {
text-align: center;
}
.item{
border: 1px solid black;
width: 300px;
margin: 10px auto;
border-radius: 3px;
cursor: pointer;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>理想情況下，在該() => {console.log(i)}部分（內部addEventListener）中，我想傳遞一個在每次迭代中都是唯一的函式。
我是否采取了正確的方法？可以修改此代碼，因此如果我單擊第 3 項，它會記錄 3（不是 5）嗎？
uj5u.com熱心網友回復：
在這種情況下，您無需求助于 refs，它onClick會起作用，您可以添加處理程式，或者您可以動態定義一個函式，如下所示：
const App = () => {
const data = ['item1', 'item2', 'item3', 'item4', 'item5'];
return (
<div className="App">
{data.map((x, i) => {
return (
<div className='item' onClick={()=>{console.log("item data", x)}} key={data[i]}>
{x}
</div>
);
})}
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById("root")
);.App {
text-align: center;
}
.item{
border: 1px solid black;
width: 300px;
margin: 10px auto;
border-radius: 3px;
cursor: pointer;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522591.html
標籤：反应反应钩子使用参考
上一篇：為什么反應不呈現空格