Question

按下按钮时动态生成TextInput，但是我无法获得用户数字的值，请尝试使用状态，但是我不能，因为它不是与其他常规textInputs一起使用的，而是作为字段导入的。

尝试在组件文件中创建状态，然后将其移至常规视图并打印，以查看其是否有效，...是否有任何方法可以使该状态生效？

一般视图：

    import Campo from './campoInput';
  
constructor(props){
super(props);

this.state={
  Cbusto:"",
  Ccintura:"",
  Ccadera:"",
  valueArray: []
};
this.addNewEle = false;

}

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

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

------Here are the normal textInput-----

     <View style={{ flex: 1, padding: 4 }}>
        {this.state.valueArray.map((ele) => {
          return <Campo item={ele} />;
        })}
      </View>

      <View style={styles.flex}>
        <View style={styles.ButtonAdd}>
          <Button
            title="Add input"
            color="#B13682"
            onPress={this.agregarCampo}
          ></Button>
        </View>

)
}

组件：

constructor(props){
    super(props);
    
     this.state={
    info:""
    }; 
    }

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

Answer 1

可以通过以下方式解决：将onChangeText事件添加到概览中的Field组件，并使用道具状态以相同的方式在要导入的组件的TextInput中添加

一般视图：

<View style={{ flex: 1, padding: 4 }}>
        {this.state.valueArray.map((ele) => {
          return <Campo item={ele}
          onChangeText={(text) => this.setState({ info: text })}
          />;
        })}
 </View>

组件

 <View>
         <Text>pruba:{this.props.item.text}</Text>
         <View style={styles.input}>
         <TextInput onChangeText={this.props.onChangeText}></TextInput>
         </View>
 </View>

在React Native中从TextInput组件获取价值

1 个答案: