React Native _this2.refs.myinput.focus is not a function

Question

Using React-Native, I have a custom component that extends from TextInput as follows:

Textbox.js

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

MyScene.js (imports TextBox.js)

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

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

When I create an application and press further on the keyboard, when I focus on MyFirstInput, I expect it to MySecondInputbe in focus, instead I get an error:

_this2.refs.MySecondInput.focus is not a function

What could be a mistake? Is it related to volume this? Thank.

Answer 1

This is because the focus is the TextInput method, and it is not in the advanced version.

TextBox.js, :

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

TextInput

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

Answer 2

, ref HTML? , - , : , , , , .focus HTML-?

MDN. , HTML, , ref MySecondInput , ?

Answer 3

React,

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

,

this._randomName.anyMethod()