簡體   English   中英

從 React Native 中的 TextInput 組件獲取值

[英]Get value from a TextInput component in react native

當您按下按鈕時動態生成一個 TextInput 但我無法獲得用戶數字的值,嘗試使用狀態但我不能,因為它不與其他通用 textInputs 一起但它作為字段導入。

嘗試在組件文件中創建一個 state 並將其移動到一般視圖並打印它以查看它是否有效,而不是...有什么辦法可以帶來這個 state?

普遍的看法:

    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>
    )
}

可以通過將 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM