Question

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

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

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

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

如何在单个onClick中传递这些多个道具？

Answer 1

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

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

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

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

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

Answer 2

您的第一个代码段不起作用，因为您无法多次绑定到道具。第二个是不正确的，因为括号内的任何东西都是JS，所以内部的附加括号是不必要的，你也没有调用任何函数。

以这种方式思考，onClick={props.headlinesClicked}有点像onClick={() => props.headlinesClicked()}的简写（不完全像onClick也将事件作为第一个参数传递，但希望你得到它的要点）。所以，当你执行onClick={() => props.headlinesClicked}时，你实际上并没有调用该函数，只是返回对它的引用，然后实际上什么也没做。

您可以执行onClick={() => props.headlinesClicked(); props.getData()}，也可以将其提取到同时执行这两项调用的新函数/方法，然后使用onClick={myNewMethod}或onClick={() => myNewMethod()}调用它。

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

2 个答案: