React Native TextInput ref 总是未定义

Question

我有一个简单的文本输入，我想在我的渲染中放置一个引用：

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

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

  constructor(props) {
    super(props);
    this.state = {
      addresses: []
    };
    this.addAddress = this.addAddress.bind(this);
  }

添加地址函数：

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

渲染和添加地址中的控制台日志始终未定义。

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

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

Answer 1

使用状态

通常，使用 TextInput 的方法是将值存储在 state 中。

请记住将状态中的地址初始化为空字符串，否则地址为 null 值可能会导致错误。

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);
  }
}

我不推荐第二种方法，因为您正在访问私有方法，这些方法可能会在未来版本中发生变化。

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

Answer 3

此代码片段在 react native 和 react native web 中正常工作：

    const txtRef = useRef(null)
    return(
    <TextInput
      ref={txtRef}
      onChangeText={text => txtRef.current.value = text}
    />
    <Button
      title='log and reset'
      onPress={() => {
        console.log(txtRef.current.value)
        txtRef.current.clear()
        txtRef.current.value = ''
    }}
    />
    )

'