【react】事件处理

一、通过onXxx属性指定事件处理函数

<script type="text/babel">
	class Demo extends React.Component{
		myRef = React.createRef()
		showData = (event)=>{
			console.log(event.target) // 发生事件的事件源，得到的是button
			alert(this.myRef.current.value);
		}

		render(){
			return(
				<div>
					<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示数据</button>
				</div>
			)
		}
	}
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

（1）React使用的是自定义(合成)事件, 而不是使用的原生DOM事件，为了更好的兼容性
（2）React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ，为了高效

二、通过event.target得到发生事件的DOM元素对象

不要过度使用ref

发生事件的元素正好是要操作的元素就可以省略ref

<script type="text/babel">
	class Demo extends React.Component{
		myRef = React.createRef()
		showData = (event)=>{
			alert(event.target.value);
		}

		render(){
			return(
				<div>
					<input onBlur={this.showData} type="text" placeholder="失去焦点提示数据"/>
				</div>
			)
		}
	}
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>