react-native - 无法使用 ref 访问组件
问题描述
为什么 this.workmin.value 未定义?
captureInput=(text)=>{
console.log('captureinput',this.refs.workmin.value)
}
render() {
console.log('RENDER',this.state)
return (
<View style={styles.container}>
<Text style={styles.bigFont}>{`${this.state.timer + 'TIMER'}`}</Text>
<Text style={styles.bigFont}>{`${this.state.min + ':' + this.state.sec}`}</Text>
<View style={styles.button}>
<Button title='START' onPress={()=>this.startToggle()} />
<Button title='RESET' onPress={()=>this.resetToggle()} />
</View>
<View style={styles.row}>
<Text style={[styles.bold,{marginRight:10},{width:112},
{textAlign:'right'}]}>
Work Timer:</Text>
<Text style={styles.bold}> min:</Text>
<TextInput
value={Math.floor(this.state.workTime / 60).toString()}
ref= {(ref)=>{this.workmin=ref}}
style={styles.input}
onChangeText={(text) => {this.captureInput(text)}}
/>
</View>
)
}
解决方案
refs
已弃用,请改为执行以下操作:
<TextInput
ref={(ref) => {
this.workmin = ref;
}}
/>
然后你可以像this.workmin.focus()
.
推荐阅读
- python - 使用 pyodbc 将 access 数据库连接到 python 时遇到问题-尝试读取数据
- html - 如何在 python 文本编辑器中运行 HTML 文件
- c++ - 如何在对象组合中正确使用 + 运算符?
- excel - 仅在文件打开时评估 Excel Online 中的公式一次?
- c++ - 由于 Linux 上的编译器变化,安装的库和我的代码之间存在冲突
- javascript - 我们可以在 JavaScript 的自定义函数中使用预定义函数吗?
- apache-kafka - 启用 SASL 身份验证时,Kafka 从 Zookeeper 收到 Sasl 异常
- java - 建立有效地求和为数字的排列
- python - 大熊猫行的聚合
- reactjs - 如何在反应导航5中的嵌套导航中将道具从顶部导航传递到屏幕