web-dev-qa-db-ja.com

React Nativeの<TextInput>のdefaultValueを制御する方法は？

defaultValueが設定された<TextInput/>と、<TextInput>のdefaultValueをトリガーして他の場所に渡すボタンがあります。

しかし、<TextInput/>のdefaultValueを<TouchableHighlight/>のonPressメソッドに渡すにはどうすればよいですか？

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

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>
    )
}
javascriptcssreact-nativetextinputjsx
8
user3259472

1つは、renderメソッドが複数のノードを返すことはできないということです。 <TextInput/>は<TouchableHighlight/>コンポーネントでラップする必要があると思います。

render() {

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

これにより、小道具を<TouchableHightlight>から<TextInputに渡して、defaultValueとして使用できるようになり、<TouchableHighlight>コンポーネントでアクセスできるようになります。

3
Brett DeWoody

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}/>
)
}
2
Teedub