作用
refs是为了获取节点,使用场景主要在需要操作dom的时候,比如echarts,就需要真实的dom节点
使用
import React from "react";
class RefsTest extends React.Component{
state = {
value:'输入框的值'
}
refPlan = React.createRef()
logRef = ()=>{
console.log(this.refPlan,'refs获取的节点')
console.log(this.refPlan.current.innerText,'refs里面节点的值')
}
changeInput = ()=>{
console.log(this.refs.inputRef,'输入框的节点')
let value = this.refs.inputRef.value
console.log(value,'输入框的值')
this.setState({value:value})
}
render(){
return (<div>
{/* 字符串定义方式:不建议用,后续更新会删除 */}
<p ref={this.refPlan}>一个段落</p>
<button onClick={this.logRef}>查看</button>
{/* createRef()定义方式 */}
<input type="text" ref='inputRef' value={this.state.value} onInput={this.changeInput}/>
</div>)
}
}
export default RefsTest效果如下文章来源：https://www.toymoban.com/news/detail-696898.html
文章来源地址https://www.toymoban.com/news/detail-696898.html
到了这里，关于React三属性之:refs的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
