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

当我构建应用并在关注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}/>
  );
}

Answer 2

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

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

Answer 3

如果您想在现代React版本中使用

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

如果要访问方法，请使用

this._randomName.anyMethod()

Answer 4

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

MyScene.js（导入TextBox.js）

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

TextBox.js

 <TextInput
    {...this.props}
    ref={this.props.refName}
    ... />

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

4 个答案: