React Native按钮绑定函数未触发问题求助

嘿，我一眼就瞅到问题出在哪了！咱们一步步来拆解：

1. 最核心的问题：onPress回调没有触发函数执行 #

你当前的代码里，onPress的写法是：

<PlayAgainButtons onPress={ () => this.handlePlayAgainClick }>

这里的() => this.handlePlayAgainClick只是返回了函数的引用，并没有调用这个函数。相当于你告诉按钮“点击的时候给我这个函数”，而不是“点击的时候执行这个函数”。

修正方法很简单，给函数加上括号：

<PlayAgainButtons onPress={ () => this.handlePlayAgainClick() }>

如果不需要额外传参，还可以更简洁地直接传函数引用（但要注意this指向问题，后面会说）：

<PlayAgainButtons onPress={ this.handlePlayAgainClick }>

2. 次要问题：handlePlayAgainClick里的goBack作用域不对 #

你在render里解构了const { goBack } = this.props.navigation，但这个goBack变量只在render函数的作用域里有效，handlePlayAgainClick里是访问不到它的。所以你直接写goBack('BScreen')会报错（如果打开控制台的话应该能看到）。

修正方式有两种：

• 在handlePlayAgainClick里直接从this.props.navigation获取goBack：

  handlePlayAgainClick () {
    dispatch(playAgain())
    this.props.navigation.goBack('BScreen')
  }
  

• 或者把goBack作为参数传入回调：

  render() {
    const { goBack } = this.props.navigation;
    return (
      <PlayAgainButtons onPress={ () => {
        dispatch(playAgain())
        goBack('BScreen')
      }}>
      {/* 按钮内容 */}
      </PlayAgainButtons>
    )
  }
  

3. 额外注意：this指向问题 #

如果用直接传函数引用的写法（onPress={ this.handlePlayAgainClick }），要确保handlePlayAgainClick里的this指向当前组件实例。你可以通过以下两种方式绑定this：

• 在构造函数里绑定：

  constructor(props) {
    super(props);
    this.handlePlayAgainClick = this.handlePlayAgainClick.bind(this);
  }
  

• 或者用箭头函数定义方法（推荐，更简洁）：

  handlePlayAgainClick = () => {
    dispatch(playAgain())
    this.props.navigation.goBack('BScreen')
  }
  

最终修正后的完整示例 #

// 用箭头函数定义方法，自动绑定this
handlePlayAgainClick = () => {
  dispatch(playAgain())
  this.props.navigation.goBack('BScreen')
}

render() {
  return (
    <PlayAgainButtons onPress={this.handlePlayAgainClick}>
      {/* 按钮内容 */}
    </PlayAgainButtons>
  )
}

这样调整后，点击按钮应该就能正常触发playAgain的dispatch和返回BScreen的操作啦！

内容的提问来源于stack exchange，提问作者Chris Henry