はネイティブ_this2.refs.myinput.focus反応し反応させ、ネイティブを使用した機能

Question

はありませんが、私はそうのようなの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の範囲と関係がありますか？ありがとう。

Answer 1

これは、フォーカスがTextInputのメソッドであり、拡張バージョンに存在しないためです。

あなたは以下のようTextBox.jsにフォーカスメソッドを追加することができます。

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

、あなたは現代のリアクトバージョンの使用でこれをやってみたかった場合のTextInput

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

Answer 2

refがHTML要素を返さないためでしょうか？私はこのスコープで何もする必要はないと考えています.focusは関数ではないので、.focusがHTML以外の要素に存在しないためにおそらく実行できません。

MDN .focusは、HTML要素でなければならないことを示しています。ref MySecondInputをログに記録し、要素があるかどうかを確認する必要がありますか？

Answer 3

に参照を追加します

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

アクセスしたい場合はこの方法が

を使用

this._randomName.anyMethod()