React Native onPress异常：点击不触发或自动触发问题求助

别急，我来帮你理清楚这两种写法的问题，以及怎么实现点击按钮才执行方法的需求：

先搞懂两种写法为啥会出问题 #

• 无需点击自动触发的情况：
  你写的 <Button onPress={this.switchview(newview)} ...> 这里犯了一个常见错误——onPress 需要接收的是一个函数引用，但你直接调用了 this.switchview(newview)，相当于把这个函数执行后的结果传给了 onPress。所以组件一渲染，这个方法就会立刻执行，根本等不到点击。

• 点击不触发的情况：
  而 <Button onPress={() => this.switchview(newview)} ...> 这种箭头函数包裹的写法，逻辑上是对的（点击时才会执行箭头函数里的代码），但没触发大概率是 this 的指向问题。如果你的 switchview 是类组件的普通方法，没有正确绑定 this，那调用时 this 可能不是组件实例，导致方法执行异常（甚至可能在控制台有报错，你可以检查一下）。

给你几个可行的解决方案 #

方案1：在构造函数里绑定this

如果是类组件，在构造函数里把 switchview 的 this 绑定到组件实例：

constructor(props) {
  super(props);
  // 绑定this
  this.switchview = this.switchview.bind(this);
}

// 你的switchview方法
switchview(view) {
  // 这里的this现在指向组件实例，可以正常操作state等
  this.setState({ currentView: view });
}

然后 onPress 就可以用你原来的箭头函数写法：

<Button onPress={() => this.switchview(newview)} title="whatever" />

方案2：用箭头函数定义switchview方法

直接把类里的方法定义成箭头函数，这样 this 会自动绑定到组件实例，不用手动绑定：

// 箭头函数形式定义方法
switchview = (view) => {
  // 这里的this直接指向组件实例
  this.setState({ currentView: view });
}

同样用 <Button onPress={() => this.switchview(newview)} title="whatever" /> 就可以正常触发点击。

方案3：用bind直接传递参数和绑定this

如果你不想用箭头函数包裹，也可以用 bind 同时绑定 this 和传递参数：

<Button onPress={this.switchview.bind(this, newview)} title="whatever" />

这种写法也能实现点击时执行方法，并且把 newview 作为参数传进去。

最后提醒一下 #

可以在 switchview 方法里加个 console.log，比如 console.log('触发了switchview', view)，这样能确认方法是否真的被调用，方便排查问题。

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