代码里面多了一些我复习上一节视频的内容,建议小伙伴也自己多敲几遍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component {
/*
1. 通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ————为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)————为了高效
2. 通过event.target得到发生事件的DOM元素对象 不要过度使用ref
*/
//createRef方式的ref
myRef = React.createRef()
//myRef2 = React.createRef()
showData = () => {
const myRef = this.myRef.current.value
alert(myRef)
}
/* showData2 = (event) => {
//alert(this.myRef2.current.value)
alert(event.target.value)
} */
render() {
return (
<div>
<input ref={this.myRef} type="text" />
<button onClick={this.showData}>按钮点击出现左边框内容</button>
<input /* ref={this.myRef2} */ /* onBlur={this.showData2} */ onBlur={()=>{alert(event.target.value)}} type="text" />
</div>
)
}
//回调函数形式的ref
/*
showData=()=>{
const {index1} =this
alert(index1.value)
}
showData2=()=>{
const {index2} =this
alert(index2.value)
}
render() {
return (
<div>
<input ref={(currentNode)=>{this.index1=currentNode}} type="text"/>
<button onClick={this.showData}>点击按钮提示数据</button>
<input ref={currentNode=>this.index2=currentNode} onBlur={this.showData2} type="text"/>
</div>
)
} */
//字符串形式的ref
/*
showData = () => {
const { index1 } = this.refs
alert(index1.value)
}
showData2 = () => {
const { index2 } = this.refs
alert(index2.value)
}
render() {
return (
<div>
<input ref="index1" type="text" />
<button onClick={this.showData}>点击按钮提示数据</button>
<input ref="index2" onBlur={this.showData2} type="text" />
</div>
)
} */
}
ReactDOM.render(<Demo />, document.getElementById("test"))
</script>
</body>
</html>