一、事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="app"></div>
<!-- 加载 React。-->
<!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js"。-->
<!--react核心库-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!--react扩展库 用于支持react操作DOM-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--babel 让支持jsx转js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--用于对组件标签属性进行限制 全局会多一个对象PropTypes-->
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
<script type="text/babel">/*此处一定要写babel*/
/*
1、通过onXxx属性指定事件处理函数(注意大小写)
(1)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件----为了更好的兼容性
(2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ----为了的高效
2、通过event.target得到发生事件的DOM元素对象----不要过度使用ref
*/
//1.创建组件
class Demo extends React.Component{
//创建ref容器
myRef=React.createRef()
myRef2=React.createRef()
//展示左侧输入框的数据
showData=()=>{
console.log(this.myRef.current);
alert(this.myRef.current.value);
}
showData2=(event)=>{
alert(event.target.value)
}
render(){
//ref=回调函数,函数参数是当前的节点
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//2.渲染虚拟DOM到页面
ReactDOM.render(<Demo/>,document.getElementById('app'))
</script>
</body>
</html>