React Native _this2.refs.myinput.focus不是函数 [英] React Native _this2.refs.myinput.focus is not a function

问题描述

使用React-Native，我有一个自定义组件，它是从TextInput扩展的，就像这样:

Using React-Native, I have a custom component which extends from TextInput like so:

TextBox.js

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

MyScene.js (导入TextBox.js)

MyScene.js (imports TextBox.js)

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

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

当我构建应用程序并在专注于MyFirstInput时按键盘上的next时，我希望MySecondInput处于焦点，相反会出现错误:

When I build the app and press next on the keyboard when focusing on MyFirstInput, I expect MySecondInput to be in focus, instead I get the error:

_this2.refs.MySecondInput.focus is not a function

可能是什么错误?与this的范围有关吗?谢谢.

What could the error be? Is it something to do with the scope of this? Thanks.

推荐答案

这是因为focus是TextInput的一种方法，并且在扩展版本中不存在.

This is because focus is a method of TextInput, and it is not present in your extended version.

您可以如下所示将焦点方法添加到TextBox.js:

You can add a focus method to TextBox.js as below:

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

并将引用添加到TextInput

and add a ref to the TextInput

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

这篇关于React Native _this2.refs.myinput.focus不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！