无法在touchablehighlight onpress中设置状态

Question

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

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

我的最终目标是要切换toggleCharacter所以如果是假的我想将它设置为true，如果这是真的，我想将它设置为false，但我不知道如何。

Answer 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> 
    ); 
    } 
}