反应本机复选框不起作用答案

【问题标题】：React Native Checkbox not working反应本机复选框不起作用
【发布时间】：2018-07-09 18:21:49
【问题描述】：

我的 react-native 应用程序包含一个表单。我已经实现了两个复选框，它们的状态设置为布尔真。我希望布尔值 true 或 false 从这些复选框提交到数据库，但复选框按钮不起作用。这是我的代码：

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

export default class Delivery extends Component {
    constructor(props) {
      super(props);
      this.state = { 
          trackingNo: '',
          weight: '',
          length: '',
          width: '',
          //checked: true,
          delivered: { checked: true }

     };
    }


    componentDidMount(){

      fetch('https://courierapp-test.herokuapp.com/products/')
     .then(
       function(response) {
         if (response.status !== 200) {
           console.log('Looks like there was a problem. Status Code: ' +
             response.status);
           return;
         }

         // Examine the text in the response
         response.json().then(function(data) {
           console.log(data);
         });
       }
     )
     .catch(function(err) {
       console.log('Fetch Error :-S', err);
     });


    }


    onPressSubmit(){

        axios.post('https://courierapp-test.herokuapp.com/products/', {
          requestId: this.state.trackingNo,
          parcelWeight: this.state.weight,
          parcelLength: this.state.length,
          parcelWidth: this.state.width,
          parcelPickup: this.state.pickup,
          parcelDelivered: this.state.delivered,

        })


        .then(function (response) {
          console.log(response, "data sent");
        })


        .catch(function (error) {
          console.log(error, "data not sent");
        });
    }


    render() {

      return (

        <View style={{padding: 15}}>

        <TextInput
          style={styles.inputStyle}
          placeholder="Request Id"
          onChangeText={(trackingNo) => this.setState({trackingNo})}
          value={this.state.trackingNo}
        />

          <CheckBox style={styles.checkStyle}
            title='Pickup'
            checked={this.state.checked}
          />

          <CheckBox style={styles.checkStyle}
            title='Delivered'

            onValueChange={() => this.setState({ checked: !this.state.checked })}
          />

        <TextInput
          style={styles.inputStyle}
          placeholder="Enter Parcel Weight(Kg)"
          onChangeText={(weight) => this.setState({weight})}
          value={this.state.weight}
        />  

        <TextInput
          style={styles.inputStyle}
          placeholder="Enter Parcel Length(Cm)"
          onChangeText={(length) => this.setState({length})}
          value={this.state.length}
        />

        <TextInput
          style={styles.inputStyle}
          placeholder="Enter Parcel Width(Cm)"
          onChangeText={(width) => this.setState({width})}
          value={this.state.width}
        />


        <Button
        onPress={() => {
            this.onPressSubmit()
            }
        }
            title="Submit"
            color="#1ABC9C"

        />

        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    inputStyle: {
      color: '#1ABC9C',
      height: 40, 
      borderWidth: 0
    }
  });

我已经尝试了所有解决方法，但无法解决它。该复选框仅在单击时才会闪烁，但无法更改已选中或未选中的状态，也没有任何值提交到数据库。

【问题讨论】：

您尝试使用this.state.checked，但不是this.state.delivered.checked？
@Li357 抱歉打错字了。我什至尝试删除它，但仍然无法正常工作。

标签： react-native checkbox axios

【解决方案1】：

在状态中定义变量checked

 this.state = {
        checked: false
    };

创建一个方法

 onChangeCheck() {
    this.setState({ checked: !this.state.checked})
}

并使用Chekbox 的onChange() 属性更新状态并将value 提供给这样的复选框

<CheckBox
  style={styles.checkBox}
  value={this.state.checked}
  onChange={() => this.onChangeCheck()} />

【讨论】：

很好的答案，重要的是要记住内联 onCheck 或 onClick 事件在您需要将它们移动到调用 onChange/onClick 事件的函数的页面上被阻止。

【解决方案2】：

尝试在事件 onValueChange

中更改值

<CheckBox value={this.aBooleanField} onValueChange={() => {
        this.aBooleanField = !this.aBooleanField;
        this.updateView();
}}/>

updateView 是这样的：

updateView() {
    this.setState({ viewChanged: !this.state.viewChanged})
}

也适用于组件，您可以使用 updateView 仅刷新视图，setState 用于保持状态值（当您恢复应用时，旋转屏幕等）。

【讨论】：