Javascript 如何在onClick事件上传递函数中的参数

我正在尝试制作一个组件，它接收一个功能作为道具。我想在调用函数时将一些值传递给函数：

class Course extends Component {
    render() {
        return (
             <div>
                 <div id="courses">
                      <p onClick={this.props.sumPrice}>{this.props.name}<b>{this.props.price}</b></p>
                 </div>
             </div>
        );
     }
 }

---

通常，渲染中的闭包、箭头函数会准确地处理这种情况：

<div id="courses">
    <p
      onClick={() => this.props.sumPrice(this.props.price)}
    >
      { this.props.name }<b>{ this.props.price }</b>
    </p>
</div>

this.props.sumPrice（this.props.price）}
>
{this.props.name}{this.props.price}

虽然它能按预期工作，但不幸的是，它是以牺牲性能为代价的。这种影响不一定是戏剧性的问题，但通常应该避免

---

最佳解决方案是使用不会在每次重新渲染时重新创建的函数，如类方法：

class Course extends Component {
    constructor(props) {
        super(props)

        this.onClick = this.onClick.bind(this)
    }

    onClick () {
      const { sumPrice, price } = this.props

      sumPrice(price)
    }

    render() {
        return (
             <div>
                 <div id="courses">
                      <p onClick={this.onClick}>{this.props.name}<b>{this.props.price}</b></p>
                 </div>
             </div>
        )
     }
  }

课程扩展组件{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
onClick（）{
const{sumPrice，price}=this.props
综合价格（价格）
}
render（）{
返回(
{this.props.name}{this.props.price}
)
}
}

---

避免性能问题。

通常渲染中的闭包、箭头函数会准确地处理这种情况：

<div id="courses">
    <p
      onClick={() => this.props.sumPrice(this.props.price)}
    >
      { this.props.name }<b>{ this.props.price }</b>
    </p>
</div>

this.props.sumPrice（this.props.price）}
>
{this.props.name}{this.props.price}

虽然它能按预期工作，但不幸的是，它是以牺牲性能为代价的。这种影响不一定是戏剧性的问题，但通常应该避免

---

最佳解决方案是使用不会在每次重新渲染时重新创建的函数，如类方法：

class Course extends Component {
    constructor(props) {
        super(props)

        this.onClick = this.onClick.bind(this)
    }

    onClick () {
      const { sumPrice, price } = this.props

      sumPrice(price)
    }

    render() {
        return (
             <div>
                 <div id="courses">
                      <p onClick={this.onClick}>{this.props.name}<b>{this.props.price}</b></p>
                 </div>
             </div>
        )
     }
  }

课程扩展组件{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
onClick（）{
const{sumPrice，price}=this.props
综合价格（价格）
}
render（）{
返回(
{this.props.name}{this.props.price}
)
}
}

---

避免性能问题。

此解决方案提供了无法读取未定义错误的属性“props”。第二个解决方案还需要手动绑定，例如在构造函数中进行绑定，就像在

this.sumPrice.bind（this）

中一样

this.onClick=this.onClick.bind（this）

此解决方案提供了无法读取未定义错误的属性'props'。第二个解决方案还需要手动绑定，例如在构造函数中，就像在

this.sumPrice.bind（this）

中一样

this.onClick=this.onClick.bind（this）