reactjs - 无法在 react-native 中创建 ref
问题描述
我想将重点放在下一次TextInput
使用createRef()
. 我在createRef()
. 我究竟做错了什么?提前致谢。
constructor(props) {
super(props);
this.r2Ref = React.createRef();
this.r3Ref = React.createRef();
this.r4Ref = React.createRef();
this.r5Ref = React.createRef();
}
render() {
return (
<View style={SetStyle.settingsCont}>
<ScrollView>
<View style={SetStyle.contRate}>
<View style={SetStyle.rView}>
<Text style={SetStyle.rText}>Rate1</Text>
<TextInput style={SetStyle.rInput} keyboardType='numeric'
returnKeyType="next" onSubmitEditing={() => this.refs.r2Ref.focus()}></TextInput>
</View>
<View style={SetStyle.rView}>
<Text style={SetStyle.rText}>Rate2</Text>
<TextInput style={SetStyle.rInput} keyboardType='numeric'
ref={r2Ref => this.r2Ref = r2Ref}
returnKeyType="next" onSubimitEditing={() => this.refs.r3Ref.focus()}></TextInput>
</View>
<View style={SetStyle.rView}>
<Text style={SetStyle.rText}>Rate3</Text>
<TextInput style={SetStyle.rInput} keyboardType='numeric'
ref={r3Ref => this.r3Ref = r3Ref}
returnKeyType="next" onSubmitEditing={() => this.refs.r4Ref.focus()}></TextInput>
</View>
<View style={SetStyle.rView}>
<Text style={SetStyle.rText}>Rate4</Text>
<TextInput style={SetStyle.rInput} keyboardType='numeric'
ref={r4Ref => this.r4Ref = r4Ref}
returnKeyType="next" onSubmitEditing={() => this.refs.r5Ref.focus()}></TextInput>
</View>
<View style={SetStyle.rView}>
<Text style={SetStyle.rText}>Rate5</Text>
<TextInput style={SetStyle.rInput} keyboardType='numeric'
ref={r5Ref => this.r5Ref = r5Ref}></TextInput>
</View>
</View>
</ScrollView>
</View>
);
}
}
我收到以下错误:
未定义不是对象(评估 this2.refs.r2Refs.focus)
解决方案
这里的问题是您将Callback Refs与createRef API 混合在一起。您也错误地访问它们。将它们定义为变量后,您需要改用所述变量。
您需要做的是:
class Component extends React.Component {
r2Ref = React.createRef();
render() {
return <Input name="r2" ref={this.r2Ref} />
}
}
推荐阅读
- r - ggplot2中的几何线不显示R
- python - ModuleNotFoundError:没有命名模块,但文件嵌套在模块中
- web - 5个网站抓取数据并在网站上比较产品价格
- webpack - 是否可以在 Webpack 中为每个条目以不同的方式解析模块?
- android - 长时间运行的通知和 android 应用程序图标快捷方式
- python - 如何使用共享内存在 cpp 和 python 之间共享 cv::Mat 以进行处理
- django - 将模型的 DELETE 方法从真正的删除覆盖到在 Django RESTful 框架中设置属性
- c++ - C++ 项目在 Visual Studio 2019 中触发了断点
- c++ - 如何使用 C++ 期货和对局部变量的引用引发崩溃?
- flutter - auto_route build_runner 未构建 [构造函数不能有返回类型]