React Native _this2.refs.myinput.focus不是函数

Question

使用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>
  );
}

当我构建应用程序并在聚焦时按键盘上的next时MyFirstInput，我希望MySecondInput能聚焦，但会出现错误：

_this2.refs.MySecondInput.focus is not a function

错误可能是什么？与范围有关this吗？谢谢。

Answer 1

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

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

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

并将引用添加到TextInput

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