React Native Checkbox无法正常工作-Java 学习之路

我的反应本机应用程序由一个表单组成 . 我已经实现了两个复选框，其状态设置为布尔值true . 我希望boolean 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
    }
  });

我已经尝试了所有的工作，但无法解决它 . 复选框仅在单击时保持闪烁，但无法更改已选中或未选中的状态，也无法将值提交到数据库 .

2 回答

在状态中定义变量 checked

this.state = {
        checked: false
    };

创建一个方法

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

并使用 Chekbox 的 Chekbox 来更新状态并将 value 提供给这样的复选框

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

回复于 2024-05-08T07:47:27+08:00

0
尝试更改事件内的值 onValueChange
```
<CheckBox value={this.aBooleanField} onValueChange={() => {
        this.aBooleanField = !this.aBooleanField;
        this.updateView();
}}/>
```
updateView是这样的：
```
updateView() {
    this.setState({ viewChanged: !this.state.viewChanged})
}
```
也适用于 < Switch /> 组件，您可以使用updateView仅刷新视图，使用setState保持状态值（当您恢复应用程序，旋转屏幕等） .
回复于 2024-05-08T07:47:27+08:00

React Native Checkbox无法正常工作

2 回答

相关问题