React Hooks 中用于传递参数的单击事件的语法是什么

Question

这在 React class 组件中对我来说一直很有效：

let myValue: string = "Hello World";
<Button onClick={this.handleClick.bind(this, myValue)}></Button>

我在 React Hooks 文档中找到了这个语法，我喜欢它，但它并不总是返回一个值：

<Button onClick={handleClick} value={myValue}></Button>

此语法有效，但难以键入且看起来很乱：

<Button onClick={() => handleClick(myValue)}></Button>

这是使用钩子的另一种方式，但对我来说似乎很老套。

  <Button onClick={handleClick.bind(null, myValue)}></Button>

我被太多的选择弄糊涂了。是不是只有一些最佳实践方法可以做到这一点？

Answer 1

你问题中的第一个和最后一个版本都创建了一个新函数，所以如果你可以将函数 handleClick 赋予道具，你应该这样做。

如果您需要将参数传递给函数，您仍然可以在函数组件中使用您的第一个版本，但由于未使用 this，您可以将其设置为 null。

<Button onClick={handleClick.bind(null, myValue)}></Button>

Answer 2

这是非常适合的方法：

<Button onClick={() => handleClick(myValue)}></Button>

唯一的缺点是 onClick 道具在每次渲染时都有新的价值并触发子组件的重新渲染 - 即使它是纯的。这可能会或可能不会导致性能问题，具体取决于特定组件；如果有很多 Button 个实例或者它们的重新渲染很昂贵，这将是一个问题。

如果值是静态的，回调可以定义为组件外部的常量函数：

// outside function component
const myValue = "Hello World";
const myHandleClick = () => handleClick(myValue);
...
// inside function component
<Button onClick={myHandleClick}></Button>

如果一个值是动态的并且仅在组件内部可用，则可以在组件内部定义一个函数并使用 useMemo 或 useCallback 挂钩进行记忆（正如另一个答案已经提到的）：

// inside function component
const myHandleClick = useCallback(() => handleClick(myValue), [myValue]);
...
<Button onClick={myHandleClick}></Button>

React Hooks 中用于传递参数的单击事件的语法是什么

What is the syntax for click events in React Hooks for passing arguments

javascript

reactjs

react-hooks