React中子组件如何向父组件的handleClick函数传递参数？

嘿，我明白你遇到的问题了——直接写this.props.onClick(1)的话，组件一渲染这个函数就立刻执行了，根本等不到你点击按钮！这是因为React的onClick需要接收一个函数引用，而不是函数执行的结果。给你几个可行的解决办法：

方法1：用箭头函数包裹调用 #

这是最直接的方式，在onClick里写一个箭头函数，点击按钮时才会执行这个箭头函数，进而调用父组件的方法并传递参数：

class BettingChips extends Component{
  render(){
    return(
      <div>
        <button onClick={() => this.props.onClick(1)}>1</button>
        <button onClick={() => this.props.onClick(5)}>5</button>
        {/* 其他按钮同理 */}
      </div>
    )
  };
}

这种写法简单直观，适合按钮数量不多的场景。

方法2：使用bind绑定参数 #

你也可以用bind把参数提前绑定到父组件的方法上，同样能实现点击时传参：

class BettingChips extends Component{
  render(){
    return(
      <div>
        <button onClick={this.props.onClick.bind(this, 1)}>1</button>
        <button onClick={this.props.onClick.bind(this, 5)}>5</button>
        {/* 其他按钮同理 */}
      </div>
    )
  };
}

这里bind的第一个参数this其实可以传null（因为你的父组件handleClick里没有用到this），写成this.props.onClick.bind(null, 1)也完全没问题。

方法3：提取统一的点击处理函数（推荐多按钮场景） #

如果你的子组件有很多按钮，每个都写箭头函数或bind会显得冗余。可以在子组件里写一个统一的处理函数，通过事件对象获取按钮的value，再传递给父组件：

class BettingChips extends Component{
  handleButtonClick = (e) => {
    // 把按钮的value从字符串转成整数
    const betAmount = parseInt(e.target.value, 10);
    this.props.onClick(betAmount);
  }

  render(){
    return(
      <div>
        <button onClick={this.handleButtonClick} value={1}>1</button>
        <button onClick={this.handleButtonClick} value={5}>5</button>
        <button onClick={this.handleButtonClick} value={10}>10</button>
        {/* 其他按钮只需要设置对应的value即可 */}
      </div>
    )
  };
}

这种写法更简洁，还能统一处理参数格式（比如把字符串类型的value转成数字），维护起来更方便。

试试上面的方法，你的父组件就能正常接收到子组件传递的betAmount参数啦！

内容的提问来源于stack exchange，提问作者Eric Gumba