<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="test">
<span></span>
</div>
</body>
</html>
<script type="text/babel">
/*
* (1) 通过onXxx属性指定事件处理函数(注意大小写)
* a:React使用的事自定义(合成)事件,而不是使用的原生事件-----为了更好的兼容性
* b:React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)-----为了更高效
* (2) 通过event.target得到发生事件的DOM元素对象 ----不要过度的使用ref
* */
class Demo extends React.Component{
myRef =React.createRef()
showData=()=>{
//current ref的容器
alert(this.myRef.current.value)
}
showInfo=(event)=>{
alert(event.target.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="信息"/>
<button onClick={this.showData}>点击</button>
<input onBlur={this.showInfo} type="text"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,test)
</script>
浙公网安备 33010602011771号