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

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

0 голосов
/ 06 февраля 2019

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

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

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

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

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

Обычно способ использования TextInput заключается в сохранении значения в состоянии.

Не забудьте инициализировать адрес в вашем состоянии в виде пустой строки, в противном случае нулевое значение для адреса может вызвать ошибку.

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

Тогда вы можете определить свой текстовый ввод следующим образом 

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

Затем в своем addAddress 

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

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

В качестве альтернативы выможно использовать ._lastNativeText для доступа к нему из ссылки 

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

, затем в вашем addAddress 

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

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

0 голосов
/ 06 февраля 2019

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