React 个人常用代码，防止采坑专用版

Love The Way You Lie 2023-02-23 08:46 19阅读 0赞

### 目录 ###

*   *  dom事件绑定模板
     *  常用的生命周期函数
     *  ref绑定dom元素
     *  鼠标移入移出事件子元素的验证处理
     *  默认props
     *  常用的dom事件

## dom事件绑定模板 ##

官网的示例

class class extends React.Component { 
      constructor(props) { 
        super(props);
        this.state = { number: 0};
    
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick(e,id) { 
      	//为了能够修改后渲染到dom，这种写法也是要得
        this.setState(state => ({ 
          number: state.number + 1
        }));
      }
    
      render() { 
        return (
        	//为了可以传入参数，需要这样写
          <button onClick={ (e) => this.handleClick(e,id)}>
            { this.state.number}
          </button>
        );
      }
    }

## 常用的生命周期函数 ##

componentDidMount() { 
      	//组件被渲染执行
      }
    
      componentWillUnmount() { 
      	//组件被移出执行
      }

## ref绑定dom元素 ##

constructor(props) { 
    	this.demo = React.createRef();
    }
    function(){ 
    	this.demo.current
    }
    render() { 
    	return(
    		<div ref={ this.demo}></div>
    	)
    }

## 鼠标移入移出事件子元素的验证处理 ##

//先给父元素绑定上ref能够获取到元素
    domEvent(event){ 
    	if(!this.parent.current.contains(event.relatedTarget)){  //判断是否不是子元素
    	}
    }

## 默认props ##

static defaultProps = { };

## 常用的dom事件 ##

onMouseOver //鼠标移入
    onMouseOut  //鼠标移出
    onClick  //点击事件

发表评论取消回复

表情：

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

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

相关阅读

相关 React采坑专区

React采坑专区 > 1. this指向问题 > > <button onClick={ this.addList}>增加</button> >

傷城~/ 2023年03月12日 09:30/ 0 赞/ 271 阅读

相关 React 个人常用代码，防止采坑专用版

目录 dom事件绑定模板常用的生命周期函数 ref绑定dom元素鼠标移入移出事件子元素的验证处理

Love The Way You Lie/ 2023年02月23日 08:46/ 0 赞/ 20 阅读

相关 seata采坑

1、docker安装nacos后 seata使用nacos作为注册中心和配置中心启动会报错如下 the name of service provider for

电玩女神/ 2022年11月09日 11:27/ 0 赞/ 398 阅读

相关 docker采坑

yml文件编写 1.冒号后面要带空格例如prots: 80: 80不是80:80 2.不能用tab缩进

绝地灬酷狼/ 2022年10月18日 13:59/ 0 赞/ 330 阅读

相关 Mybatis采坑

collection中的id需要取别名与之对应，否则出错 <resultMap id="supplier" type="com.ch.cooker.tob.fa

╰半橙微兮°/ 2022年05月23日 09:38/ 0 赞/ 417 阅读

相关采坑ajax

今天一不小心踩了两个坑，总归起来就是一个事儿：用layui进行ajax表单提交。坑一：layui的的表单默认是进行form表单提交的，如果不在监听提交事件的最后加一句"re

系统管理员/ 2022年05月21日 00:08/ 0 赞/ 387 阅读

相关 2018-03-30 react-native 初学采坑

学习react-native时出现 ReferenceError:Can't find variable getItemView 错误代码如下 render()\{ r

蔚落/ 2022年05月20日 06:44/ 0 赞/ 242 阅读

相关采坑layui

open的表单取出的值总是为空：参考了网上许多文章，原因是layui是将原先的表单复制一份。解决办法：错误示范：$("input\[name=title"\].val(

àì夳堔傛蜴生んèń/ 2022年05月18日 07:09/ 0 赞/ 430 阅读

相关初始化react-native项目运行采坑

第一坑.react和react-native版本配合有很高的要求 init项目启动后报如下错误： error: bundling failed: "Unable to re

港控/mmm°/ 2022年05月13日 23:24/ 0 赞/ 356 阅读

相关 thymeleaf 采坑

如果我请求的url需要返回视图，如果这个url不是第一层url，那么视图层会找不到这个页面引用的一些静态资源。例如，下面的代码：我的请求路径为： http://

超、凢脫俗/ 2022年03月15日 05:38/ 0 赞/ 457 阅读