ReactJS技术疑问：点击按钮为何触发两个onClick绑定方法？

为啥点Add按钮会触发removeItem？ #

核心问题出在删除按钮的onClick绑定上：你写的onClick={removeItem(item)}是直接执行了函数，而不是把函数引用传给点击事件。

每次组件渲染（包括点击Add按钮调用setItems更新items导致的重渲染），items.map循环里的removeItem(item)都会被立即执行一遍，所以你点Add按钮时，不仅触发了addItem，还会连带执行所有删除按钮对应的removeItem。

怎么改？ #

方法1：用箭头函数包裹 #

把删除按钮的onClick改成箭头函数，这样只有点击时才会调用removeItem：

<button id="b" type="button" onClick={() => removeItem(item)}>Delete</button>

方法2：让removeItem返回一个函数 #

调整removeItem的写法，让它返回一个处理点击的函数：

const removeItem = item => () => {
    console.log('remove', item);
}

之后删除按钮的onClick就可以直接写onClick={removeItem(item)}，此时传递的是返回的函数，而非直接执行。

额外提醒 #

你的map循环里没返回按钮元素，得补上，而且React列表渲染要求给每个元素加key：

{items.map((item, index) => (
    <button key={index} id="b" type="button" onClick={() => removeItem(item)}>Delete</button>
))}

内容的提问来源于stack exchange，提问作者Luke