如何在React onChange事件的bind函数中正确传递参数？

你遇到的问题是事件处理函数的参数顺序搞反了，原因出在bind的使用方式上：

当你在onChange里写this.props.homeScoreChangedHandler.bind(this, this.props.game)时，bind方法会把你传入的this.props.game作为处理函数的第一个参数预先绑定好。而React的onChange回调原本会自动传入event对象作为第一个参数，现在这个event会变成处理函数的第二个参数。

但你的处理函数定义成了async (event, game)...，这就导致：

• 第一个参数event实际接收到的是你绑定的game对象
• 第二个参数game实际接收到的才是event对象
  自然就出现了参数混乱的情况。

方案1：调整处理函数的参数顺序 #

把处理函数的参数顺序改成(game, event)，和bind绑定的参数顺序对应：

homeScoreChangedHandler = async (game, event) => {
  // 现在game是正确的游戏对象，event是事件对象
  const updatedScore = event.target.value;
  // 这里写同步到Firebase的逻辑，比如更新game的home_result字段后上传
}

方案2：改用箭头函数传递参数（更直观） #

放弃bind，直接在onChange里用箭头函数显式传递参数，这样参数顺序完全由你控制：

<TextField 
  type='number' 
  value={this.props.game.home_result} 
  onChange={(event) => this.props.homeScoreChangedHandler(event, this.props.game)} 
/>

这时候你的处理函数async (event, game)...的参数顺序就是正确的，event接收到事件对象，game接收到目标游戏对象。

内容的提问来源于stack exchange，提问作者Fernando Maymone