Блог

Главная - Вопросы по программированию - React Native _this2.refs.myinput.focus не является функцией

React Native _this2.refs.myinput.focus не является функцией

#javascript #reactjs #react-native #ecmascript-6

#javascript #reactjs #реагировать-родной #ecmascript-6

Вопрос:

Используя React-Native, у меня есть пользовательский компонент, который расширяется от TextInput следующим образом:

TextBox.js

 ...
render() {
  return (
  <TextInput
    {...this.props}
    style={styles.textBox}/>
  );
}
...

MyScene.js (импорт TextBox.js )

 ...
render() {
  render(
    <View>
      <TextBox
        rel='MyFirstInput'
        returnKeyType={'next'}
        onSubmitEditing={(event) => { this.refs.MySecondInput.focus(); }}/>

      <TextBox
        ref='MySecondInput'/>
    </View>
  );
}

Когда я создаю приложение и нажимаю далее на клавиатуре при фокусировке MyFirstInput , я ожидаю MySecondInput , что буду в фокусе, вместо этого я получаю сообщение об ошибке:

 _this2.refs.MySecondInput.focus is not a function

В чем может заключаться ошибка? Это как-то связано с областью применения this ? Спасибо.

Ответ №1:

Это связано с тем, что focus — это метод TextInput, и он отсутствует в вашей расширенной версии.

Вы можете добавить метод фокусировки к TextBox.js как показано ниже:

 focus() {
    this.refs.textInput.focus();
},

и добавьте ссылку на текстовый ввод

 render() {
  return (
  <TextInput
    {...this.props}
    ref={'textInput'}
    style={styles.textBox}/>
  );
}

Ответ №2:

Если вы хотите сделать это в современной версии React, используйте

 ref = { ref => this._randomName = ref }

Если вы хотите получить доступ к методу, используйте

 this._randomName.anyMethod()

Ответ №3:

Может быть, это потому, что ссылка не возвращает HTML-элемент? Я не думаю, что это должно что-то делать с этой областью, там просто написано .focus не является функцией, поэтому она не может быть выполнена, вероятно, потому, что .focus не существует для элемента, отличного от HTML?

MDN .focus показывает, что это должен быть HTML-элемент, может быть, вам следует зарегистрировать ссылку MySecondInput и посмотреть, получите ли вы элемент?

Комментарии:

1. Я использую React-Native, но применяются большинство тех же принципов. Я вошел this.refs.SecondInput в консоль, и мой компонент был возвращен, поэтому компонент возвращается, это просто .focus() функция, которая, похоже, не работает.

2. Они фактически реализовали .focus() при объяснении ссылок в документах react. взгляните на этот пример es6

Ответ №4:

Другой вариант — передать ссылку по реквизитам из TextBox.js для ввода текста.

MyScene.js (импорт TextBox.js )

 <TextBox      
 refName={ref => { this.MySecondInput = ref; }}
/>

TextBox.js

  <TextInput
    {...this.props}
    ref={this.props.refName}
    ... />
Метки: