下面是我的文本字段，如果API提供任何数据，它将被预先填充。
现在，我想在API值被更改后将其更新为它，以便它在任何地方都被更改。我该怎么做？
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] });
};
}
});
上面是活动的更新代码，其中所有详细信息都是从API预先填充的。如果用户进行了任何编辑，在单击按钮后，它应该保存，这样它将被全局更新。
在react native material文本字段中，"value"prop充当默认值。要更新值，您需要使用ref。使用React.createRef((获取ref，然后使用ref中的setValue函数。
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>
);
}
}
为了能够在需要实现特定包的onChangeText功能时更新API。参见以下示例：
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 }
/>
);
}
}
通过API保存值后，您需要确保global.CheckOutData.billing_address.country_code也得到更新，否则您将不会在TextField中看到新值。这通常是通过为应用程序实现状态管理器来处理的。我通常为此实现Redux，以保持一切同步。
我希望这能有所帮助！
import { TextField } from 'react-native-material-textfield';
<TextField
containerStyle={styles.textInputStyle}
label="Email"
onChangeText={(text) => this.onEmailTextChange(text)} />