第三章：关于事件与样式

一、react中事件绑定与原生js的对比

• 1、原生js中绑定事件的方式

  • 1、在行内直接使用

    <input type="button" value="按钮" onclick="alert()"/>
    

  • 2、 DOM0的绑定方法

    el.onclick = function(){
        //
    }
    

  • 3、DOM3事件绑定方式

    el.addEventListener('click',()=>{},false);
    el.attachEvent('click',()=>{})
    

• 2、在react中只有一种事件绑定方式(注意**onClick**是驼峰命名)

  <input type="button" onClick={this.方法名} />
  

二、react中事件绑定this的注意点

• 1、由于react中创建一个组件有几种方式参考
• 2、this我们都要绑定到当前组件,那么实例化,就是本类的对象才可以调用到里面的方法
• 3、在使用ES6和纯函数创建组件的方式,需要手动去绑定this

react中绑定this的方法

• 1、直接创建方法的时候就绑定(比较适合传递参数)

  <input value="添加" onClick={this.add.bind(this)} type="button"/>
  <input value="添加" onClick={this.add.bind(this,参数1,参数2)} type="button"/>
  

• 2、在构造函数中绑定

  constructor(props:Props){
      super(props);
      console.log(`constructor方法`);
      this.add = this.add.bind(this);
  }
  

• 3、使用箭头函数自动绑定,注意要加括号

  <input value="添加" onClick={()=>this.add()} type="button"/>
  

三、样式的使用

• 1、一般我们开发过程中会一个组件匹配一个样式,且样式文件名和组件文件名一样的

• 2、在组件中直接引入样式import './Hello.css';

• 3、在组件内定义样式的方式<div className="hello"></div>

• 4、不建议使用行间样式,数据可能是动态渲染的,那么部分样式就不会生效,使用方式

  <p ref="myp" style={{'border':'1px solid #360'}}>1111--{this.state.num1}</p>