React中的事件处理
事件处理
1. 通过 onXxx 属性指定事件处理函数(注意大小写)
1)React 使用的是自定义(合成)事件,而不是使用的原生 DOM 事件 ———— 为了更好的兼容性
2)React 中的事件是通过事件委托方式处理的(委托给组件最外层的元素)———— 更高效
2. 通过 event.target 得到发生事件的 DOM 元素对象 (和原生一样)
// 创建组件
class Demo extends React.Component {
// React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是"专人专用"
myRef = React.createRef()
myRef2 = React.createRef()
showData = () => {
alert(this.myRef.current.value)
}
showData2 = (event) => {
alert(event.target.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧数据</button>
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
生活是痛苦的白天,死亡是凉爽的夜晚。