将值传递给TextInput onPress

时间:2017-09-13 20:20:45

标签: reactjs react-native ecmascript-6 react-native-text

我的组件是:

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上显示TextInputOpen的数据。我想将值传递给TextInput。假设我想传递data.name,所以当onPress Open时,我希望data.name已经位于TextInput的开头,所以我可以将其传递给this.state.thetext

我怎样才能做到这一点?非常感谢。

1 个答案:

答案 0 :(得分:3)

您可以对 <uses-permission android:name="android.permission.RECEIVE_MMS"/> <uses-permission android:name="android.permission.RECEIVE_SMS"/> <receiver android:name="com.webnation.text2email.receivers.SMSBroadcastReceiver"> <intent-filter android:priority="2147483647"> <action android:name="android.provider.Telephony.SMS_RECEIVED"/> </intent-filter> </receiver> <receiver android:name="com.webnation.text2email.receivers.MMSBroadcastReceiver" > <intent-filter> <action android:name="android.provider.Telephony.WAP_PUSH_RECEIVED" /> <data android:mimeType="application/vnd.wap.mms-message" /> </intent-filter> </receiver> 进行控制。为此,您可以将TextInput道具传递给value,就像这样

TextInput

现在关注焦点,您所要做的就是将<TextInput ref='MyBox' style={{height: 40}} value={this.state.thetext} onChangeText={(thetext) => this.setState({thetext})} /> 状态设置为您要在thetext中显示的值

TextInput