react 事件

左手的ㄟ右手 2021-07-25 02:47 418阅读 0赞

1、阻止默认行为
    
    	在表单中,只要设置了button,且命名为提交，则表单会默认提交，react中的
    	event是代理机制,与原生有区别
    
    	event.preventDefault()阻止默认行为
    
    2、事件传参数
    	如事件传入参数,onClick='this.函数(参数)' 页面加载后因为函数名后加了(),会自动调用函数，使得事件机制失效
    	解决方案:onClick='(event)=>{this.函数(参数,event)}'
    		通过点击调用箭头函数来调用函数,使得参数能够传递,event也不会失效
    
    3、在回调函数内绑定this
    	this.函数名.apply(this);  谁调用this就指向谁

代码示例:

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    
    class A extends React.Component{ 
    	constructor(props){ 
    		//将props传递给父类构造器
    		super(props);
    		this.state={ 
    			flag:true,
    			info:''
    		}
    
    	}
    	render()
    	{ 
    		return(
    			<div>父组件
    				<h1>{ this.state.info}</h1>
    				<button onClick={ (e)=>{ this.receive('jeff',e)}}>按我</button>
    			</div>
    		)
    	}
    
    	 receive(msg,e)
    	{ 
    		console.log(msg);
    		console.log(e);
    	}
    }
    
    
    
    
    ReactDOM.render(<A/>, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();

发表评论取消回复

表情：

评论列表（有 0 条评论，418人围观）

还没有评论，来说两句吧...

相关阅读

相关 react阻止事件冒泡

react阻止事件冒泡 // 这里的handleClick事件就合成事件 <a ref="aaa" onClick={ (e)=>this.handleC

心已赠人/ 2022年12月28日 01:45/ 0 赞/ 134 阅读

相关 react事件的问题

react的事件是我们学习react必会学习的，react事件处理会有多种方法，也有一种不经意的小问题。下面一起看看react事件处理问题 //代码一 imp

你的名字/ 2022年10月09日 06:27/ 0 赞/ 137 阅读

相关 React - 事件处理

类似于DOM事件处理，有几点不同之处： React的事件名字是首字母小写的驼峰式写法，而不是小写的。在JSX里面，事件处理器是一个函数，而不是一个字符串。例

拼搏现实的明天。/ 2022年07月10日 04:55/ 0 赞/ 191 阅读

相关 React -- 事件系统

React 中的虚拟DOM是在内存中以对象的形式存在的，因此，在对象上添加事件，就会非常容易。 React给予Virtual DOM实现了一个SyntheticEvent合成

绝地灬酷狼/ 2022年06月16日 02:46/ 0 赞/ 487 阅读

相关 React学习 -- 事件系统

React中virtualDOM是以对象的形式存在的，所以想要在这些对象上绑定事件，就会非常简单。React基于VirtualDOM实现了一个合成事件层，我们所定义的事件处理器

╰+哭是因爲堅強的太久メ/ 2022年06月14日 10:24/ 0 赞/ 189 阅读

相关 React（4）事件处理

10、事件处理 > 事件的 this 注意，事件触发的 this，默认指向的 undefined；所以请手动绑定 this 给事件相应函数。比如： thi

r囧r小猫/ 2022年05月31日 08:08/ 0 赞/ 222 阅读

相关 React的事件系统

文章目录合成事件的绑定方式合成事件的实现机制事件委托自动绑定在React中使用原生事件原生事件和合成事件的混

悠悠/ 2021年12月12日 13:39/ 0 赞/ 259 阅读

相关 React阻止事件冒泡

<div className={styles.hezi} onClick={e => this.handleClick(e)}> handleClick=e

比眉伴天荒/ 2021年09月17日 20:32/ 0 赞/ 416 阅读

相关 react 事件

1、阻止默认行为在表单中,只要设置了button,且命名为提交，则表单会默认提交，react中的 event是代理机制,与原生有区别

左手的ㄟ右手/ 2021年07月25日 02:47/ 0 赞/ 419 阅读

相关 react 样式、事件

React组件添加样式和事件样式: (1)组件内class属性变成className

浅浅的花香味﹌/ 2021年07月24日 17:09/ 0 赞/ 492 阅读