事件处理程序的正确名称是什么？ onClick 还是 handleClick？

Question

我认为保持代码一致是一件很重要的事情。有时我用不同的处理程序名称（使用 Javascript）弄乱了我的代码。事件处理程序的正确名称是什么？ onClick 对比 handleClick?

Answer 1

这是主观的，但您最常看到的是以下内容：

如果您要创建组件并公开事件挂钩，这些道具将是 on：onClick、onHover、onUsernameChanged、onError。在您的组件内部，这些道具只是您在 on 某些事件上调用的函数。你不关心他们做什么，你的工作就是在正确的时间打电话给他们
如果你正在使用另一个组件，你想添加处理以响应这些事件，所以你使用 handle：handleChange、handleClick、handleUserLogout，因为你现在的工作是处理一些事件并做一些事情发生响应它。如果您不处理，将不会对应用程序状态进行任何更改

Answer 2

严重，

根据：Naming-Event-Handlers-React。该页面的作者说：

道具：

我们通常使用on*作为前缀，如onClick。这符合内置事件处理程序约定。通过匹配它，我们声明这些道具将包含类似使用的事件处理函数。

对于函数名称：

我们遵循完全相同的模式，但我们将 on 替换为 handle*，如 handleClick.

希望能帮到你。

Answer 3

道具用在...例如：

const ProductVariants = ({ productId, onCancel, onReturnProducts })

但是你的函数名你应该使用 handle...

<ProductVariants
            productId={productId}
            onCancel={handleCancel}
            onReturnProducts={handleReturnProduct}
          />

Answer 4

我更喜欢命名事件 props/attributes on* 和处理程序 handle*.

原因很简单，否则有时会发生冲突。看看这个例子：

const Foo = ({ onClick }) => {
  const handleClick = (event) => {
    doSomethingElseHere();
    onClick(event);
  }
  
  return (
    <button onClick={handleClick}>Bar</button>
  )
}

如果我们同时命名处理程序和道具 onClick，它们的名称会冲突。

事件处理程序的正确名称是什么？ onClick 还是 handleClick？

What is the right name of event handler? onClick or handleClick?

javascript

code-formatting

reactjs

道具：

对于函数名称：