如何控制React Native's <TextInput>的defaultValue

How to control defaultValue of React Native's <TextInput>?

本文关键字：TextInput defaultValue 何控制 控制 React Native      更新时间：2023-09-26

我有一个<TextInput/>与defaultValue设置和一个按钮，它将触发并传递<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>
    )
}

首先，render方法不能返回多个节点。我认为<TextInput/>应该由<TouchableHighlight/>组件包装，如:

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

这将使得可以通过<TouchableHightlight>到<TextInput传递道具作为defaultValue使用，并且您可以在<TouchableHighlight>组件中访问它。

您可以将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}/>
)
}
相关文章：