Question

我必须根据状态值“已检查”将“检查框”用户界面从“检查”更改为“取消检查”，反之亦然。

为此，我使用了'react-native-elements'。

我的州名已选中

我还使用了两个按钮来更改状态值，但是该复选框并未根据状态值进行渲染。

我做了如下操作：请指导。

谢谢。

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而不使用=会导致文本错误。

Answer 2

您的onPress输入错误。您需要setState。除了@Jay的答案，

setState是异步的，这意味着如果多次按下该复选框，事情可能会变得一团糟。所以最好的方法是获取prevState并对其进行突变

例如：在复选框之间来回切换状态

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

复选框未根据状态值呈现

2 个答案: