Reagieren india _this2.refs.myinput.focus ist keine Funktion

Question

Verwenden von React-Ureinwohner, ich eine benutzerdefinierte Komponente haben, die wie so von TextInput- erweitert:

TextBox.js

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

MyScene.js (Importe TextBox.js)

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

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

wenn ich die app und drücken Sie als nächste auf der Tastatur zu bauen, wenn wobei der Schwerpunkt auf MyFirstInput erwarte ich, dass MySecondInput im Fokus sein, stattdessen ich den Fehler:

_this2.refs.MySecondInput.focus is not a function 

Was könnte der Fehler? Hat es etwas mit dem Umfang von this zu tun? Vielen Dank.

Answer 1

Dies liegt daran, Fokus ist eine Methode von TextInput, und es ist nicht in Ihrer erweiterten Version vorhanden.

Sie können eine Fokusmethode zu TextBox.js hinzufügen wie folgt:

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

und ref zum

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

Answer 2

Vielleicht liegt es daran, dass die Ref nicht ein HTML-Element zurückgibt? Ich denke nicht, dass es irgendwas mit diesem Bereich zu tun hat, es sagt nur, dass .focus keine Funktion ist, also kann es nicht ausgeführt werden, wahrscheinlich weil .focus nicht auf einem Nicht-HTML-Element existiert?

MDN .focus zeigt, dass es ein HTML-Element sein muss, vielleicht sollten Sie den Verweis MySecondInput protokollieren und sehen, ob Sie ein Element bekommen?

Answer 3

TextInput- hinzufügen Wenn Sie dies in der modernen Reagieren Version Gebrauch machen wollte

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

Wenn Sie die Methode verwenden

zugreifen möchten

this._randomName.anyMethod()