如何將數組的索引傳遞給reactJs onClick？

Question

const Test = ({ inventory }) => 
<div className="row"> 
    {inventory.map((item, i) => 
     <div className="item" key={"item_" + i}> 
      <div className="card hoverable col s3"> 
       <img onClick={buyItem(i)} src={item.img} alt="" /> 
       <div className="container center-align"> 
        <h4 className=""> 
         {item.name} 
        </h4> 
        <p> 
         Price: {item.price} 
        </p> 
        <p> 
         Average price paid: {item.averageDisplay} 
        </p> 
        <p> 
         Amount owned: {item.owned} 
        </p> 
        <button 
         className="btn" 
         data={item.index} 
         onClick={sellItem(i)} 
         name="button" 
        > 
         Sell 
        </button> 
       </div> 
      </div> 
     </div> 
    )} 
</div>; 

ReactDOM.render(<Test inventory{inventory}/>, 
document.getElementById("container") 
); 

庫存是一個對象數組，我已經成功地在這個例子中循環遍歷，但由於某種原因，我無法弄清楚如何將我的值傳遞給函數，儘管它已經存在用於生成唯一的密鑰。

Answer 1

你需要創建一個新的功能

onClick={() => sellItem(i)} 

Answer 2

通過創建一個函數調用

onClick={(event) => buyItem(event, i)} 

使用方法如下