react: 事件处理

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1. 总结

1. 通过onXxx属性指定事件处理函数(注意大小写)

  1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性

  2. 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="点击按钮提示数据"/>&nbsp;
				<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
			</div>
		)
	}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

以上是 react: 事件处理 的全部内容， 来源链接： utcz.com/z/382379.html

回到顶部