如何控制 React Native 的 <TextInput> 的 defaultValue？

Question

我有一个带有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>
    )
}

Answer 1

一方面，render 方法不能返回多个节点。我相信<TextInput/> 应该被<TouchableHighlight/> 组件包裹，比如：

render() {

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

这将使从<TouchableHightlight> 到<TextInput 的prop 可以用作defaultValue，并且您可以在<TouchableHighlight> 组件中访问它。

Answer 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}/>
)
}