React Native TextInput ref всегда не определен

У меня есть простой 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);
  }

Журнал консоли как в рендере, так и в addAddress всегда не определен.

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

Почему мне кажется, что у меня нет ссылок?


react-native react-ref
person ekr990011    schedule 06.02.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

person Andrew    schedule 06.02.2019
comment
Для меня ._lastNativeText всегда не определено - person Kasra; 11.11.2020
comment
Как я уже сказал, я бы не рекомендовал использовать этот метод, это частный метод, и он мог измениться или больше не существовать. - person Andrew; 11.11.2020

arrow_upward
1
arrow_downward

Текстовый ввод самозакрывается

<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
  }
person ValdaXD    schedule 06.02.2019
comment
Спасибо, что сработало, хотелось бы дать правильный ответ обоим! - person ekr990011; 06.02.2019