react: 事件处理
1. 总结
1. 通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素,事件冒泡) ————————为了高效
2. 通过event.target得到发生事件的DOM元素对象,避免过度使用ref
在进行事件处理时,一般会将发生事件的元素作为参数传递到函数,如果要操作的元素就是发生事件的元素,就可以通过该元素直接进行处理,例如下面的showData2
2. 示例
class Demo extends React.Component{
//创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = (event)=>{
console.log(event.target);
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 a="1" b="2"/>,document.getElementById('test'))
如果文章对您有所帮助,可以点一下推荐