版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38323645/article/details/83316653
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07_component_refs</title>
</head>
<body>
<div id="example"></div>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
//定义组件
class App extends React.Component{
constructor(props){
super();
console.log(this);//this指向的是组件的实例对象
this.myclick = this.myclick.bind(this);
}
myclick(){
let val = this.refs.msg.value;
alert(val);
}
myclick2(event){
let val = event.target.value;
alert(val);
}
render () {
console.log(this);
return (
<div>
<input ref="msg"type="text"/>
<button onClick={this.myclick}>点击获取右侧输入框的值</button>
<input onBlur={this.myclick2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById("example"));
</script>
</body>
</html>
点击事件结果：
失去焦点事件结果：
