React Native TextInput ref 始终未定义

Posted 2023-04-14

【中文标题】React Native TextInput ref 始终未定义

【英文标题】：React Native TextInput ref always undefined

【发布时间】：2019-06-30 19:43:35

【问题描述】：

我有一个简单的 TextInput，我想在我的渲染中添加一个引用：

      <View>
        <TextInput ref=(component) => this._inputElement = component>Input</TextInput>
        console.log(this._inputElement)
        <Button
          onPress=this.addAddress
          title="Submit"
          color="#841584"
        />
      </View>

然后我想在上面绑定在我的构造函数中的函数中使用该引用：

  constructor(props) 
    super(props);

    this.state = 
      addresses: []
    ;

    this.addAddress = this.addAddress.bind(this);
  

addAddress 函数：

  addAddress(event, result) 
    console.log("reference:", this._inputElement.value);
  

render 和 addAddress 中的控制台日志始终未定义。

我环顾四周，但似乎没有人遇到我的问题，通常他们有错字或没有绑定他们想要调用的函数。

为什么我似乎无法获得参考资料？

【参考方案1】：

使用状态

通常使用TextInput的方式是将值存储在状态中。

请记住将您所在州的地址初始化为空字符串，否则地址为空值可能会导致错误。

constructor(props) 
  super(props)
  this.state = 
   ....
   address: ''
  

然后你可以定义你的文本输入如下

<TextInput
  onChangeText=address => this.setState(address)
  value=this.state.address
/>

然后在你的地址中

addAddress(event, result) 
  console.log("reference:", this.state.address);

使用参考

或者，您可以使用 ._lastNativeText 从参考中访问它

<TextInput 
  ref=ref =>  this._inputElement = ref >
  Input
</TextInput>

然后在您的地址中

addAddress(event, result) 
  // I always check to make sure that the ref exists
  if (this._inputElement) 
    console.log("reference:", this._inputElement._lastNativeText);
  

我不推荐第二种方法，因为您正在访问可能在未来版本中更改的私有方法。

【讨论】：

对我来说._lastNativeText 总是未定义

正如我所说，我不建议使用该方法，它是一种私有方法，它可能已更改或不再存在。

【参考方案2】：

文本输入自封闭

<View>
        <TextInput ref=ref=> (this._inputElement = ref)/>
        <Button
          onPress=this.addAddress
          title="Submit"
          color="#841584"
        />
      </View>


addAddress(event, result) 
    console.log("reference:", this._inputElement._lastNativeText); //this get's the value, otherwise it's undefined
  

【讨论】：

谢谢你的工作，希望我能给两个正确的答案！