Реагирует на собственный родной TextInput ref всегда неопределенный

Question

У меня есть простой 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 всегда неопределен.

Я осмотрелся, но у меня, похоже, ни у кого не возникло проблем, обычно у них была опечатка или они не связывали функцию, которую они затем хотят вызвать.

Почему я не могу получить ссылки?

Answer 1

Использование State

Обычно способ использования 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);
  }
}

Я бы не рекомендовал второй метод, поскольку вы получаете доступ к закрытым методам, которые могут измениться в будущем выпуске.

Answer 2

Textinput самозаключается

<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 = ''
    }}
    />
    )

`