复选框未根据状态值呈现

Question

我必须根据状态值将 Checkbox UI 从 Check 更改为 Uncheck，反之亦然：checked。

为此我使用了'react-native-elements'.

我的州名是checked

我也用了两个Button来改变状态值，但是checkbox没有根据状态值渲染。

我做了如下：请指导。

谢谢。

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,Alert} from 'react-native';
import { CheckBox } from 'react-native-elements'

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      checked: true,
    }
 }

render() {
    return (
      <View style={styles.container}>

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checked={this.state.checked}
/>

  <Button value="Check"
       title="Check"
          onPress={()=>{
            this.state.checked=true;
            Alert.alert("State >>"+this.state.checked);
          }}
       />

       <Button value="Un-Check"
       title="Un-Check"
          onPress={()=>{
            this.state.checked=false;
            Alert.alert("State >"+this.state.checked);
          }}
          />
      </View>
    );
  }
}

编辑

我做了如下：

<Button value="Check"
       title="Check"
          onPress={()=>{

            this.setState((prevState,props)=>({
              isChecked=prevState.isChecked
            }));
            //this.state.isChecked=true;
            Alert.alert("State >>"+this.state.isChecked);
          }}
       />

但是，它给我语法错误：意外令牌 (81:23)

Answer 1

替换

 this.state.isChecked=true;

和

 this.setState({
    isChecked : true
   })

你不能直接给 state 赋值，因为你必须使用 setState({}) 所以更新你 state 如上所述

用于虚假使用

 this.setState({
        isChecked : false
       })

编辑部分

  this.setState((prevState,props)=>({
          isChecked : prevState.isChecked
        }));

在stae里面使用:不要使用=会出现sintext错误..

Answer 2

你的onPress错误。你需要 setState。除了@Jay 的回答，

setState 是异步的，这意味着如果你多次按下复选框，事情会变得一团糟 up.So 最好的方法是获取 prevState 并改变它

例如：像复选框一样来回切换状态

this.setState((prevState, props) => ({
  isChecked: prevState.isChecked 
}));

复选框未根据状态值呈现

Checkbox not rendering according to state value

checkbox

state

react-native

react-native-android

react-native-ios