前言：ref是个啥，我的理解是一个获取当前对象的val值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="exam1"></div>
</body>
<script type="text/javascript" src="../react.development.js"></script>
<script type="text/javascript" src="../react-dom.development.js"></script>
<script type="text/javascript" src="../babel.min.js"></script>
<script type="text/babel">
//1.定义组件
class TetsRef extends React.Component{
//定义自动调用
constructor(props) {
super(props)
this.handlme = this.handlme.bind(this)//改变this为当前组件
this.handleBlur = this.handleBlur.bind(this)//改变this为当前组件
}
//定义函数
handlme(){
// const v1 = this.refs.content
alert(this.input1.value)
}
handleBlur(event){
// const v1 = this.refs.content
alert(event.target.value)
}
render (){
return (
<div>
<input type="text" ref={input=>this.input1=input}/>
<button onClick={this.handlme}>点击我喔</button>
<input type="text" placeholder="失去焦点提示" onBlur={this.handleBlur}/>
</div>
)
}
}
ReactDOM.render(<TetsRef />,document.getElementById('exam1'))
</script>
</html>
网友评论