2016-10-04 3 views
1

私はdefaultValueを設定した<TextInput/>と、defaultValue<TextInput>のどこか他の場所でトリガーして渡すボタンを持っています。React NativeのdefaultValueを制御する方法<TextInput>?

しかし、<TextInput/>defaultValueonPressの方法<TouchableHighlight/>に渡すにはどうすればよいですか?

これは私が達成しようとしているものです:

1の場合
changeName(text) { 
    this.setState({nameNow: text}) //How can I immediately set the defaultValue='PassMeIn' to nameNow? Because this method would never be called unless text is changed within TextInput 
} 

sendOff() { 
    //Would like to access the defaultValue='PassMeIn' here whenever sendOff() is called. How can I? 
} 

render() { 

    return (
     <View> 
      <TextInput 
       defaultValue='PassMeIn' 
       onChange={this.changeName} 
       value={this.state.nameNow} 
      /> 
      <TouchableHighlight onPress={this.sendOff}/> 
       <Text>Button</Text> 
      </TouchableHighlight> 
     </View> 
    ) 
} 

答えて

2

render方法は、複数のノードを返すことはできません。これは、それが可能defaultValueとして使用する<TouchableHightlight>から<TextInputに小道具を通過するようになりますし、あなたがそれにアクセスすることができます

render() { 

    return (
    <TouchableHighlight onPress={this.sendOff}> 
     <TextInput 
     defaultValue='PassMeIn' 
     onChange={this.changeName} 
     value={this.state.nameNow} 
     /> 
    </TouchableHighlight>  
) 
} 

:私は<TextInput/>は次のように、<TouchableHighlight/>コンポーネントによってラップされなければならないと考えています<TouchableHighlight>コンポーネント。

+0

にアクセスすることができます私は、オリジナルのポスト内のコードを変更しました。見てください。 –

2

あなたは新しい状態の内側にはdefaultValueを保存することができ、その後、あなたは両方の場所で

constructor(props) { 
super(props); 
this.state = { 
    //...other state 
    defaultValue: "PassMeIn" 
}; 

//...other code 

sendOff() { 
    //...do things with this.state.defaultValue 
} 

render() { 

    return (
    <TextInput 
     defaultValue={this.state.defaultValue} 
     onChange={this.changeName} 
     value={this.state.nameNow} 
    /> 
    <TouchableHighlight onPress={this.sendOff}/> 
) 
} 
関連する問題