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

IT技术 javascript reactjs react-native ecmascript-6
2021-05-02 15:47:42

使用 React-Native，我有一个从 TextInput 扩展的自定义组件，如下所示：

文本框.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？谢谢。

4个回答

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

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

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

并向 TextInput 添加一个引用

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

如果您想在现代 React 版本中执行此操作，请使用 

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

如果要访问该方法，请使用

this._randomName.anyMethod()

也许是因为 ref 没有返回 HTML 元素？我不认为它必须对 this 范围做任何事情，它只是说 .focus 不是一个函数，所以它可能无法执行，因为 .focus 不存在于非 HTML 元素上？

MDN .focus显示它必须是一个 HTML 元素，也许你应该记录 ref MySecondInput 并看看你是否得到了一个元素？

其他选项是通过来自 TextBox.js 的props为 TextInput 传递引用。

MyScene.js（导入 TextBox.js）

<TextBox      
 refName={ref => { this.MySecondInput = ref; }}
/>

文本框.js

 <TextInput
    {...this.props}
    ref={this.props.refName}
    ... />
其它你可能感兴趣的问题
上一篇IE array.flat() 对象不支持属性或方法“平面” 下一篇如何与PETG合作？设置、注意事项等