无法在 touchablehighlight onpress 中设置状态答案

【问题标题】：Can't setState in touchablehighlight onpress无法在 touchablehighlight onpress 中设置状态
【发布时间】：2016-10-22 18:50:52
【问题描述】：

当我尝试在 touchablehighlight onpress 中设置状态时，我的应用程序崩溃了。这是我得到的：

<TouchableHighlight onPress={this.setState({toggleCharacter: false})}>
    <Image style={styles.tekstballon} source={tekstballon} />
</TouchableHighlight>

我的最终目标是切换toggleCharacter，所以如果它是假的，我想把它设置为真，如果它是真的，我想把它设置为假，但我不知道怎么做。

【问题讨论】：

标签： react-native

【解决方案1】：

您在渲染时立即调用了 setState 调用。您需要将其包装在将在 onPress 上调用的函数中，即：

<TouchableHighlight onPress={() => this.setState({toggleCharacter: false})}>

请记住，上面的内容有点令人不悦，因为它为每个实例创建了一个新函数，但这只是为了让您了解为什么会出现错误（将其添加到类本身。）

编辑回答评论。上面提到的“更好”的做法是：

class myComponent extends React.Component {

  /*
    ...ctor and methods above
    The below assumes Property initializer syntax is available.
    If not, you need to autobind in the constructor
  /*
  handleOnPress = () => this.setState({ toggleCharacter: false })

  render() {
    return (
      <TouchableHighlight onPress={this.handleOnPress}>
        <Image style={styles.tekstballon} source={tekstballon} />
      </TouchableHighlight>
    );
  }
}

【讨论】：

谢谢你这个作品，但我不明白我到底如何才能做得更好。我应该在渲染之外创建一个函数并在 onPress 中调用它吗？
见上面的评论，但基本上是的，你只需要把它拉出来成为类本身的一个方法。