I have my react-native app consisting of a form. I have implemented two check-boxes with their state set to boolean true. I want boolean true or false to get submitted to the database from those check-boxes but the check-box button won't work. Here's my code:
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=>
<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
}
});
I have tried every work around but could not solve it. the checkbox keeps on blinking only upon clicking but could not change the state checked or unchecked and also no value getting submitted to database.
Aucun commentaire:
Enregistrer un commentaire