【问题标题】:How can I pass the index of an array into a reactJs onClick?如何将数组的索引传递给 reactJs onClick?
【发布时间】:2017-07-31 14:24:53
【问题描述】:
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")
);

inventory 是一个对象数组,在这个例子中我已经成功地循环了,但是由于某种原因,我不知道如何将 i 的值传递给一个函数,尽管它已经被用来生成唯一键。

【问题讨论】:

    标签: javascript reactjs ecmascript-6 jsx


    【解决方案1】:

    你需要创建一个新函数

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

    【讨论】:

      【解决方案2】:

      通过创建函数调用来像这样使用它

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2023-01-08
        • 2022-08-12
        • 1970-01-01
        • 2019-12-31
        • 2013-01-27
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多