Question

我有我的本机应用程序，由一个表单组成。我已经实现了两个复选框，它们的状态设置为boolean 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
    }
  });

我已尽力解决所有问题，但无法解决。复选框仅在单击时保持闪烁，但无法更改已选中或未选中的状态，也没有值提交到数据库。

Answer 1

在状态

中定义变量checked

 this.state = {
        checked: false
    };

创建方法

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

并使用onChange()的{{1}}属性来更新状态，并向此复选框提供Chekbox

value

Answer 2

尝试在事件 onValueChange

中更改值

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

updateView是这样的：

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

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

反应本机复选框不起作用

2 个答案: