React Native：单击按钮添加/删除输入字段

Question

React Native：单击按钮即可添加/删除输入字段：

当用户单击添加时，我希望添加一个新的输入字段。

你怎么做？信息保存在Firebase数据库中

我在react js中找到了信息，但在react native中没有找到

用于验证字段并发送到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() {
    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>
    );
  }

Answer 1

通过在新文件中创建组件然后将其导入主视图来解决

组件代码：

 render(){
    return(
        <View>
            <Text>prueba:{this.props.item.text}</Text>
            <View style={styles.input}>
            <TextInput></TextInput>
            </View>
        </View>
    )
}

然后，在概述中

导入组件：

import Campo from "./campoInput";

我们创建一个状态：

valueArray:[]

然后按添加字段按钮调用该功能

agregarCampo = () => {
this.addNewEle = true;
const newlyAddedValue = { text: "prueba" };

this.setState({
  valueArray: [...this.state.valueArray, newlyAddedValue],
 });
};

最后在渲染中，我们遍历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>