React Native 复选框无法正常工作。

Question

我有一个React Native应用程序，其中包含一个表单。我已经实现了两个复选框，并将它们的状态设置为布尔值true。我希望从这些复选框提交布尔值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
    }
  });

我尝试了各种解决方法，但无法解决问题。复选框在点击时只会闪烁，但无法改变选中或未选中状态，也没有提交任何值到数据库。

- Priya

---

你正在尝试使用 this.state.checked，但它不应该是 this.state.delivered.checked 吗？ - Andrew Li

@Li357 对不起，那个打字错误很抱歉。我甚至尝试过删除它，但仍然无法正常工作。 - Priya

Answer 1

在状态中定义变量checked

 this.state = {
        checked: false
    };  

创建一个方法。

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

使用Checkbox的onChange()属性来更新状态并为复选框提供value，示例如下：

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

- Jay Thummar

---

好的回答，重要的是要记住，在页面上，内联的onCheck或onClick事件会被阻止，你需要将它们移动到一个函数中，然后调用onChange/onClick事件。 - Trevor

Answer 2

尝试在 onValueChange 事件内更改数值

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

updateView 就像这样：

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

这也适用于<Switch />组件，您可以使用updateView仅刷新视图，setState则是保持状态值（当您恢复应用程序、旋转屏幕等时）。

- Ninja Coding