这里的事件,指的是 React 内部封装 DOM 组件中的事件,如 onClick, onFocus等,而非我们自己通过 props 传递的属性,并在子组件中手动触发的事件
实例
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return (
);
}
handelClick () {
console.log(1)
console.log(this)
}
// 箭头函数
handelClick2 = () => {
console.log(2)
console.log(this)
}
// 箭头函数
handelClick3 = () => {
console.log(3)
console.log(this)
}
}
export default TodoList;
//原生
//react
采用on+事件名的方式来绑定一个事件.
注意,这里和原生的事件是有区别的:
原生的事件全是小写onclick , React里的事件是驼峰 onClick ,React的事件并不是原生事件,而是合成事件。
和普通浏览器一样,事件handler会被自动传入一个 event 对象,这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是**React中的 event 对象并不是浏览器提供的,而是它自己内部所构建的**。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法.
实例
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return (
{/* :如果逻辑过不多,此写法推荐 */}
{/* 可以直接访问this,无需手动绑定 */}
{/* :此写法不推荐 */}
{/* 不可以直接访问this,需手动绑定 -- .bind(this)*/}
{/* :此写法推荐 */}
{/* 可以直接访问this,无需手动绑定,handelClick2是箭头函数,可以绑定外部this :此写法推荐 */}
{/* :此写法比较推荐,传参数很方便 */}
{/* 可以直接访问this,无需手动绑定,onClick调用的是箭头函数,可以绑定外部this */}
);
}
handelClick () {
console.log(1)
console.log(this)
}
// 箭头函数
handelClick2 = (evt) => {
console.log(2)
console.log(this)
// 打印 Event 对象
console.log(evt)
}
// 箭头函数
handelClick3 = (evt) => {
console.log(3)
// 打印 Event 对象
console.log(evt)
}
}
export default TodoList;
为什么使用bind绑定this
class A extends React.Component{
constructor(props){
super(props)
}
handleClick(){
//class的方法默认不会绑定 `this`,this的指向根据调用的方式判断
//没有绑定调用的话this为undefined
this.setState({a:1})
}
render(){
return (
)
}
}
this问题的解决方式有三种
(1)在constructor里使用bind为方法绑定this
class A extends React.Component{
constructor(props){
super(props)
this.handleClick= this.handleClick.bind(this); // 注意此处
}
handleClick(){
this.setState({a:1})
}
}
(2)在元素上绑定事件时使用箭头函数
class A extends React.Component{
constructor(props){
super(props)
}
handleClick(){
//class的方法默认不会绑定 `this`,this的指向根据调用的方式判断
//没有绑定调用的话this为undefined
this.setState({a:1})
}
render(){
//render里的this指向自身
return (
this.handleClick() }>
)
}
}
(3)使用箭头函数声明方法
class A extends React.Component{
constructor(props){
super(props)
}
handleClick=()=>{
//箭头函数的this由父作用域的this判断
this.setState({a:1})
}
render(){
//render里的this指向自身
return (
)
}
}
(1)通过bind,使用bind会隐式传入事件对象e,作为函数的最后一个参数。
(2)通过箭头函数,使用箭头函数需要主动传入事件对象e 。
React 根据 W3C 规范定义了合成事件 (SyntheticEvent),我们就无需担心跨浏览器的兼容性问题 React 出于性能与事件管理方面的考量,在之前的 React 版本中 (v17 之前)
注意点
触摸只会在移动设备上产生
onKeyPress是onKeyDown和onKeyUp的组合
对应的是我们常常使用的复制、剪切和粘贴
onInput使用在文字输入。
onSubmit是用在整个表单的输入提交,常用在禁止表单的默认操作。
滚动事件触发的时候会触发onScroll事件
鼠标滚轮触发的事件,监听滚动幅度,滚动方位
虚拟事件对象已经被合并。这意味着虚拟事件对象将被重新使用,而该事件回调被调用之后所有的属性将无效。这是出于性能的考虑。因此,您不能以异步的方式访问事件。
function onClick(event) {
console.log(event); // =>无效的对象
console.log(event.type); // => "click"
var eventType = event.type; // => "click"
setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
}, 0);
this.setState({clickEvent: event}); // 不起作用.this.state.clickEvent 将只包含空值.
this.setState({eventType: event.type}); // 您依然可以导出事件属性
}
如果您想以一个异步的方式来访问事件属性,您应该对事件调用event.persist()。这将从事件池中取出合成的事件,并允许该事件的引用,使用户的代码被保留。
事件处理器将会传入SyntheticEvent的实例,一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件有相同的属性和方法,包括stopPropagation()和preventDefault(),但是没有浏览器兼容问题。
如果因为一些因素,需要底层的浏览器事件对象,只要使用nativeEvent属性就可以获取到它了。
对于 v0.14,在事件处理函数中返回 false 将不会阻止事件冒泡。取而代之的是在合适的应用场景下,手动调用e.stopPropagation()或者e.preventDefault()。
handleChange:function(e){
console.log(e.target.value);
}
其中target是 事件对象e 是事件对象的属性
(以下内容括号内为类型)
为了使触摸事件生效,在渲染所有组件之前调用 React.initializeTouchEvents(true)。
var HelloDada = React.creatClass({
getInitialState:function(){
return {
backgroundColor:'#FFFFFF'
}
},
handleWheel:function(e){
var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+e.deltaY*997).tiString(16);
this.setState({
backgroundColor:newColor
})
},
render:function(){
return // 注意这里 onWheel
Dada Shuaige
}
});
ReactDOM.render( ,document.body)
var Dada =React.creatClass{
getInitialState:function(){
return{
password:''
}
},
handleKeyPress:function(e){
this.setState({
paddword:this.state.password+e.which
});
},
handleChange:function(e){
e.target.value='';
},
render:function(){
return
// 注意这里 onKeyPress
=0?'block':'none'
}}>Dada handsomeboy
}
};
ReactDOM.render( ,document.body)
状态不仅仅实现了组件内部结果的清晰对应,还实现了组件与用户之间的交互,使用户与组件的行为紧紧结合起来
handleChange:function(e){
this.setState({Dada:e.target.value});
}
this.setState设置状态
实例
var Dada =React.creatClass({
getInitialState:function(){
return{
x:0,
y:0
}
},
handleMouseMove:function(e){
this.setState({
x:e.clientX,
y:e.clientY
});
},
render:function(){
return
{this.state.x+'.'+this.state.y}
}
});
ReactDOM.render( ,document.body)
react事件和原生事件的区别是:
相对绑定的地方来说,dom上的事件要优先于document上的事件执行,react的事件对象是合成。
参考链接:
页面更新:2024-04-25
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号