[英]React Native: Add/Remove input field on click of a button
React Native: Add/Remove input field on click of a button: React Native:单击按钮添加/删除输入字段:
When a user click Add, I want a new input field to be added.当用户单击添加时,我希望添加一个新的输入字段。
How could you do it?你怎么能做到? The information is saved in a Firebase database信息保存在 Firebase 数据库中
I have found information in react js but not in react native我在 react js 中找到了信息,但在 react native 中没有
Function to validate fields and send to Firebase: Function 验证字段并发送到 Firebase:
constructor(props) {
super(props);
this.state = {
Cbusto: "",
Ccintura: "",
Ccadera: "",
};
}
validate() {
if (
this.state.Cbusto == "" &&
this.state.Ccintura == "" &&
this.state.Ccadera == ""
) {
alert("empty fields");
} else if (this.state.Cbusto == "") {
alert("empty fields");
} else if (this.state.Ccintura == "") {
alert("empty fields");
} else if (this.state.Ccadera == "") {
alert("empty fields");
} else {
firebase.database().ref("medidas/").push({
Cbusto: this.state.Cbusto,
Ccintura: this.state.Ccintura,
Ccadera: this.state.Ccadera,
});
alert("Medidas guardadas");
this.props.navigation.navigate("DatosCli", {
Cbusto: this.state.Cbusto,
Ccintura: this.state.Ccintura,
Ccadera: this.state.Ccadera,
id: this.props.route.params.id,
});
}
}
Render:使成为:
render() {
return (
<ScrollView>
<View style={styles.container}>
<Text style={styles.texto}> Contorno busto/cm</Text>
<View style={styles.input}>
<TextInput
keyboardType={"numeric"}
onChangeText={(text) => this.setState({ Cbusto: text })}
></TextInput>
</View>
<Text style={styles.texto}> Contorno cintura/cm</Text>
<View style={styles.input}>
<TextInput
keyboardType={"numeric"}
onChangeText={(text) => this.setState({ Ccintura: text })}
></TextInput>
</View>
<Text style={styles.texto}> Contorno cadera/cm</Text>
<View style={styles.input}>
<TextInput
keyboardType={"numeric"}
onChangeText={(text) => this.setState({ Ccadera: text })}
></TextInput>
</View>
<View style={styles.flex}>
<View style={styles.ButtonAdd}>
<Button title="Add input" color="#B13682"></Button>
</View>
<View style={styles.ButtonDelete}>
<Button title="delete input" color="#B13682"></Button>
</View>
</View>
<View style={styles.otro}>
<Button
title="Send"
color="#B13682"
onPress={() => {
this.validate();
}}
></Button>
</View>
</View>
</ScrollView>
);
}
is solved by creating a component in a new file that is then imported into the main view通过在新文件中创建组件来解决,然后将其导入主视图
Code for the component:组件代码:
render(){
return(
<View>
<Text>prueba:{this.props.item.text}</Text>
<View style={styles.input}>
<TextInput></TextInput>
</View>
</View>
)
}
then, in the overview然后,在概述中
import the component:导入组件:
import Campo from "./campoInput";
we create a state:我们创建一个 state:
valueArray:[]
then the function that is called by pressing the add field button然后按添加字段按钮调用的 function
agregarCampo = () => {
this.addNewEle = true;
const newlyAddedValue = { text: "prueba" };
this.setState({
valueArray: [...this.state.valueArray, newlyAddedValue],
});
};
and finally in the render we go through the valueArray and return the component最后在渲染中我们 go 通过 valueArray 并返回组件
<View style={{ flex: 1, padding: 4 }}>
{this.state.valueArray.map((ele) => {
return <Campo item={ele}
onChangeText={(text) => this.setState({ info: text })}
/>;
})}
</View>
<View style={styles.ButtonAdd}>
<Button
title="Add input"
color="#B13682"
onPress={this.agregarCampo}
></Button>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.