如何在ReactJS中的单个事件处理程序中传递多个道具？

我正在尝试将onClick侦听器添加到li中，而props将被传递到另一个组件，该组件最终将调用一个函数。我的第一个想法是简单地点击2次，但我得到了重复道具的警告

<li onClick={props.headlinesClicked} onClick={props.getData}>Top Headlines</li>

头条新闻

然后我尝试了vahnilla JS方法，但我认为它不起作用，因为这些是表达式而不是实际函数

 <li onClick={() => {{props.headlinesClicked}; {props.getData}}}>Top Headlines</li>

{{{props.headlinesClicked}；{props.getData}}>头条标题

---

如何在一次单击中传递这些多个道具？

让传递的函数正常调用其他两个函数：

<li onClick={() => { props.headlinesClicked(); props.getData() }}>Top Headlines</li>

{props.headlinesClicked（）；props.getData（）}>头条新闻

或者（为了可读性，建议）创建一个调用这两个函数的新函数。如果函数是类组件，请考虑将函数设为类方法。

const handleListItemClick = () => {
  props.headlinesClicked()
  props.getData()
}

return <li onClick={handleListItemClick}>Top Headlines</li>

consthandleListItemClick=（）=>{
道具。头条线勾选（）
props.getData（）
}
return
头条新闻

您的第一个代码片段无法工作，因为您无法多次绑定到道具。第二个是不正确的，首先是因为括号内的任何内容都是JS，因此括号内的附加括号是不必要的，并且您也没有调用任何函数

 <li onClick={() => {{props.headlinesClicked}; {props.getData}}}>Top Headlines</li>

这样想，

onClick={props.headlinesClicked}

有点像是

onClick={（）=>props.headlinesClicked（）}

的简写（不完全是onClick也将事件作为第一个参数传递，但希望您能理解它的要点）。因此，当您执行

onClick={（）=>props.headlinesClicked}

时，您实际上并没有调用该函数，只是返回一个对它的引用，而该引用实际上不会执行任何操作

您可以执行

onClick={（）=>props.headlinesClicked（）；props.getData（）}

，或者将其提取到执行这两个调用的新函数/方法，然后使用

onClick={myNewMethod}

或

onClick={（）=>myNewMethod（）}

调用它