Передать значение в 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>
    );
  }
}

Я могу показать данные из {redData} а также focus на TextInput при нажатии на Open, Я хочу передать значение TextInput, Скажи, что я хочу передать data.name, так когда onPress на Open, Я хочу 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})}
  />

Теперь в фокусе, все, что вам нужно сделать, это установить thetext состояние со значением, которое вы хотите отобразить в TextInput как это

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