傳遞價值的TextInput onPress

Question

我的組件是：

class TextInputComp extends Component { 
    constructor(props){ 
    super(); 
    this.state = { thetext: '' } 
    } 

    submitText = (text) => { 
    Alert.alert("Text Submitted!", text); 
    } 

    render() { 
    const renData = this.props.people((data, index) => { 
     return (
     <View key={index} style={styles.card}> 
      <Text style={styles.names}> ID: {data.id} - Name: {data.name} </Text> 
      <TouchableOpacity 
       onPress={()=>this.refs.MyBox.focus()} > 
       <Text>Open</Text> 
      </TouchableOpacity> 
     </View> 
      ) 
     }); 
return (
     <View style={mystyles1.container}> 
     {renData} 
     <View> 
     <TextInput 
      ref='MyBox' 
      style={{height: 40}} 
      onChangeText={(thetext) => this.setState({thetext})} 
     /> 
      <TouchableOpacity 
      onPress = {() => this.submitText(this.state.thetext) }> 
       <Text style = {styles.ButtonText}> Submit </Text> 
      </TouchableOpacity> 
     </View> 
     </View> 
    ); 
    } 
} 

我可以顯示在TextInput從{redData}和focus數據上Open點擊時。我想將一個值傳遞給TextInput。假設我想通過data.name，所以當Open的onPress時，我想data.name已經在TextInput的開頭，所以我可以將它傳遞給this.state.thetext。

我該如何做到這一點？非常感謝。

Answer 1

您可以讓您的TextInput受控。對於您可以重點通過value道具TextInput這樣

<TextInput 
    ref='MyBox' 
    style={{height: 40}} 
    value={this.state.thetext} 
    onChangeText={(thetext) => this.setState({thetext})} 
    /> 

現在，所有你需要做的就是用你想在TextInput這樣

<TouchableOpacity 
    onPress={()=>{this.refs.MyBox.focus(); this.setState({thetext: data.name})}} > 
    <Text>Open</Text> 
</TouchableOpacity>