Question

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

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>
        );
     }
 }

sumPrice是在父组件中定义的函数，需要一个值。这是我的sumPrice函数和父类构造函数代码：

constructor(props) {
    super(props);

    this.state = {
        active: false,
        total: 0
    };

    this.sumPrice = this.sumPrice.bind(this);
}

sumPrice(price) {
    this.setState({ total: this.state.total + price });
}

Answer 1

通常，render中的闭包，箭头功能可以准确地处理这种情况：

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

尽管它可以按预期运行，但不幸的是，这要付出一定的性能损失Why shouldn't JSX props use arrow functions or bind?。影响不一定是严重的问题，但通常应避免。

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

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>
        )
     }
  }

避免性能问题。

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

1 个答案: