在 onClick 处理程序中传递参数的最有效方法

Question

我正在使用内联箭头函数来更改onClickReact 组件中某些 div的处理程序，但我知道这在性能方面不是一个好方法。

客观地说，设置onClick需要参数的处理程序的最有效方法是什么？这是我尝试过的：

1.内联箭头函数

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={() => this.changeRoute("page1")}>1</div>
      <div onClick={() => this.changeRoute("page2")}>2</div>
    </>
  )
}

2.如果我使用构造函数绑定，那么我如何传递道具？

constructor() {
  super(props)
  this.changeRoute = this.changeRoute.bind(this)
}
changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute}>1</div>
      <div onClick={this.changeRoute}>2</div>
    </>
  )
}

3.如果我删除箭头函数，则渲染本身调用的函数

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute("page1")}>1</div>
      <div onClick={this.changeRoute("page2")}>2</div>
    </>
  )
}

4.如果我使用内联绑定，那么它的性能也不是最好的

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute.bind(this, "page1")}>1</div>
      <div onClick={this.changeRoute.bind(this, "page2")}>2</div>
    </>
  )
}

那么我怎样才能以最好的方式传递参数呢？

Answer 1

您可以使用箭头函数来定义changeRoute处理程序。

这被称为Class field syntax。更多关于它在这里的官方反应文档。

constructor() {
  super(props)
}

changeRoute = (parameter) => (event) => {
    // business logic for route change.
}

然后你可以像这样直接使用这个函数：

render() {
  return (
    <>
      <div onClick={changeRoute(params1)}>1</div>
      <div onClick={changeRoute(params2)}>2</div>
    </>
  )
}

您不必担心绑定。箭头函数继承其父级的this.

Answer 2

您可以向 div 添加数据：

<div data-id={1} onClick={this.changeRoute}>1</div>

然后您可以在 onClick 处理程序中检索该数据：

onClick = (event) => {
  const id = event.currentTarget.dataset.id;
}