Abhishek
Reputation: 25
How to update the value entered in the textfield in react native to API?
Below is my textfield which gets pre-filled if the API gives any data.
Now, I want to update the value to API after it gets changed so that it gets changed everywhere. How do I do it?
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
ListView,
ScrollView,
TouchableOpacity,
SafeAreaView,
Dimensions,
TouchableHighlight,
} from "react-native";
import StepIndicator from "react-native-step-indicator"; // 0.0.9
import { Dropdown } from "react-native-material-dropdown";
import {
Container,
Header,
Left,
Body,
Right,
Button,
Title,
Icon,
Thumbnail
} from "native-base";
import { StackNavigator } from "react-navigation";
import CardView from "react-native-cardview";
import { TextField } from 'react-native-material-textfield';
export default class refill3 extends Component {
return (
<View style={styles.container}>
<SafeAreaView style={styles.safecontainer}>
<Header
style={{
borderBottomWidth: 0,
backgroundColor: "#FEFEFE",
borderColor: "transparent",
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0
}}
borderWidth={0}
backgroundColor={"##C91F35"}
androidStatusBarColor={"#FEFEFE"}
iosBarStyle={"dark-content"}
noShadow={true}
>
<Left style={{ flex: 0 }}>
<Button
transparent
onPress={() =>
this.props.screenProps.myDrawerNavigation.navigate("Refill2")
}
>
<Icon
name="ios-arrow-round-back"
size={38}
style={{ fontSize: 38, color: "#000" }}
/>
</Button>
</Left>
<Body style={styles.body}>
<Title style={{ color: "#000", paddingLeft: 5 }}>Checkout</Title>
</Body>
<Right style={{ flex: 1 }} />
</Header>
<ScrollView>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={stepIndicatorStyles}
stepCount={4}
direction="horizontal"
currentPosition={this.state.currentPage}
/>
</View>
<View
style={{
flexDirection: "row",
paddingLeft: 20,
paddingRight: 20
}}
>
<Text
style={{
backgroundColor: "#C3152D",
top: 50,
color: "#C3152D",
width: 5
}}
/>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 4,
top: 50,
color: "black",
fontWeight: "bold"
}}
>
Billing Address
</Text>
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 90,
color: "black",
fontWeight: "bold",
height: 25
}}
>
Country
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.country_code} editable={true} selectTextOnFocus={false} />
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
color: "black",
fontWeight: "bold",
height: 25
}}
>
First Name
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.first_name} editable={true} selectTextOnFocus={false}/>
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
color: "black",
fontWeight: "bold",
height: 25
}}
>
Last Name
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.last_name} editable={true} selectTextOnFocus={false}/>
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
color: "black",
fontWeight: "bold",
height: 25
}}
>
Street Address
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.street_address} editable={true} selectTextOnFocus={false}/>
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
color: "black",
fontWeight: "bold",
height: 25
}}
>
City
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.city} editable={true} selectTextOnFocus={false}/>
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
color: "black",
fontWeight: "bold",
height: 25
}}
>
Postal Code
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} keyboardType='numeric' textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.postal_code} editable={true} selectTextOnFocus={false}/>
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
color: "black",
fontWeight: "bold",
height: 25
}}
>
State
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.state} editable={true} selectTextOnFocus={false}/>
</View>
<View
style={{
top: 0,
marginLeft: 20,
marginRight: 20,
padding:0
}}
>
<Text
style={{
fontSize: 19,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
color: "black",
fontWeight: "bold",
height: 25
}}
>
Order Comments
</Text>
<TextField style={{ color: '#000', marginTop: 0, fontSize:18, height: 30, padding:0}} textAlignVertical='top' baseColor = '#C91F35' tintColor = '#C91F35'
value={global.CheckOutData.billing_address.order_comment} editable={true} selectTextOnFocus={false}/>
</View>
<View style={[styles.lineStyle4]} />
<View style={{ top: 50, paddingLeft: 20, paddingRight: 20 }}>
<Text
style={{
fontSize: 12,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 2,
left: 0,
top: 20,
color: "#6B727A"
}}
>
This is Step 3 of 3. In the next page you can review your order
and product information
</Text>
</View>
<View
style={{
flex: 1,
flexDirection: "row",
top: 100,
paddingLeft: 20,
paddingRight: 20,
zIndex: 1
}}
>
<View style={{ width: "50%", height: 50, top: 10, zIndex: 1 }}>
<TouchableOpacity
style={{
width: 155,
height: 50,
backgroundColor: "#ffffff",
justifyContent: "center",
borderRadius: 3,
zIndex: 1
}}
onPress={() =>
this.props.screenProps.myDrawerNavigation.navigate(
"Dashboard"
)
}
>
<Text
style={{
fontSize: 18,
paddingLeft: 10,
color: "#706F70",
textDecorationLine: "underline"
}}
>
Cancel
</Text>
</TouchableOpacity>
</View>
<View style={{ width: "50%", height: 70, top: 10 }}>
<TouchableOpacity
style={{
width: 155,
height: 50,
backgroundColor: "#C91F35",
position: "absolute",
justifyContent: "center",
borderRadius: 3,
zIndex: 1
}}
onPress={() =>
this.props.screenProps.myDrawerNavigation.navigate(
"Refill4"
)
}
>
<Text
style={{
color: "white",
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
textAlign: "center",
top: "0%"
}}
>
Review Your Order
</Text>
</TouchableOpacity>
</View>
</View>
<View
style={{
flex: 1,
flexDirection: "column"
}}
>
<View style={{ width: "100%", height: 210 }} />
<Text
style={{
fontSize: 14,
letterSpacing: 0.01,
margin: 0,
paddingLeft: 2,
left: 0,
top: 50,
color: "#6B727A"
}}
/>
</View>
</ScrollView>
</SafeAreaView>
</View>
);
}
getVisibleRows = visibleRows => {
const visibleRowNumbers = Object.keys(visibleRows.s1).map(row =>
parseInt(row)
);
this.setState({ currentPage: visibleRowNumbers[0] });
};
}
});
Above is the updated code of the activity where all the details gets prefilled from the API. If the user makes any edit, after clicking the button, it should save by which it will be updated globally.
Upvotes: 0
Views: 742
Answers (3)
Amit
Reputation: 2715
In react-native-material-textfield, 'value' prop acts as default. To update the value you need to use ref. Get the ref using React.createRef(), then use setValue function from ref.
import React, { Component } from 'react';
import { TextField } from 'react-native-material-textfield';
import { View, Button } from 'react-native';
export default class TestComponent extends Component {
textField = React.createRef<TextField>();
constructor(props) {
super(props);
this.state = {
value: 'check',
};
}
onChangeText = () => {
// Send request via API to save the value in DB
};
updateText = () => {
if (this.textField && this.textField.current) {
this.textField.current.setValue('test');
}
};
render() {
return (
<View>
<TextField
label="Test value"
value={this.state.value}
onChangeText={this.onChangeText}
ref={this.textField}
/>
<Button onPress={this.updateText} />
</View>
);
}
}
Upvotes: 1
Keshav Gera
Reputation: 11244
import { TextField } from 'react-native-material-textfield';
<TextField
containerStyle={styles.textInputStyle}
label="Email"
onChangeText={(text) => this.onEmailTextChange(text)} />
Upvotes: 0
Ismailp
Reputation: 2383
In order to be able to update the API when you need to implement the onChangeText functionality of that specific package. See an example of this below:
import React, { Component } from 'react';
import {
TextField
} from 'react-native-material-textfield';
export default class MyComponent extends Component {
constructor(props) {
super(props);
this._handleInputChange = this._handleInputChange.bind(this);
this.state = {};
}
_handleInputChange(value) {
// Send request via API to save the value in DB
}
render() {
return (
<TextField
label='Country code'
value={ global.CheckOutData.billing_address.country_code }
onChangeText={ this._handleInputChange }
/>
);
}
}
After saving the value via the API you need to make sure that global.CheckOutData.billing_address.country_code gets updated as well, otherwise you won't see the new value in the TextField. This is usually handled by implementing a state manager for your application. I usually implement Redux for that to keep everything in-sync.
I hope this helps!
Upvotes: 0
Related Questions
- Editing and updating an object text value from textinput
- TextInput value is not updated
- How to change the value of TextInput in react native
- React Native -- How to edit the value of dynamically generated TextInput fields?
- How to change default value and update with new value in TextInput in react native
- Cannot update the value in Text input
- react native - how to put value from TextInput field into the Text field
- How to update value inside object from inputText
- How to edit value in the TextInput React native?
- How to update a text input on change