Question

我正在尝试在按下按钮时更新视图的backgroundColor。如果颜色是红色，那么我希望它变为橙色，反之亦然。

我目前有按钮将视图从红色变为橙色，但不是相反。

constructor(props) {
    super(props);
    this.state = {
        viewColour: "red",
    }
}

render() {
    return (
        <View style={styles.parentView}>
            <Button
                title="Press here"
                onPress={() => this.setState({viewColour:"orange"})}
            />

            <View style={Object.assign({}, styles.colourSquare, {backgroundColor: this.state.viewColour})}/>
        </View>
    );
}

我如何检查视图的当前颜色是什么，以便确定在按下按钮时要将其更改为什么颜色？

Answer 1

你应该做

render() {
return (
    <View style={styles.parentView}>
        <Button
            title="Press here"
            onPress={() => this.setState({viewColour: this.state.viewColour == 'red' ? "orange" : 'red'})}
        />

      <View style={[styles.colourSquare, {backgroundColor: this.state.viewColour}]}/>
    </View>
  );
}

Answer 2

虽然Mohammed的方法是有效的，但Facebook现在建议在新状态取决于旧状态(according to the docs)时将函数传递给setState而不是对象。因此，您应该this.setState((prevState) => ({viewColour: prevState.viewColour == 'red' ? "orange" : 'red'}))

如何检查React Native中的视图状态？

2 个答案: