react--事件

原生js — 事件

1. 事件概念
2. 构成
3. 谁触发: DOM
4. 事件触发的形式： on addEventListener
5. 事件类型: click keyup keydown
6. 事件处理程序
7. 事件对象
8. 事件传参

var box = doucment.querySelector( 'div' )
box.onclick = function(){
//事件处理程序
}

React – 事件

1. 写法一共四种，我们推荐有两种
2. 箭头函数

class App extends React.component{
change = () => {}
}

2. 在constructor函数中bind this

class App extends React.component{
constructor () {
super()
this.change = this.change.bind( this )
}
change () {
this.setStatge({})
}
}

2. 事件对象 e

• React中的事件对象不是浏览器提供的， 而是内部自己构建的
• React的事件对象的中除了方法以外，其他值都是null，但是使用方式和浏览器中事件对象一致，也可以直接使用

3. 事件参数
4. 形式参数
5. 实际参数
   注意：
   1. React中如果直接在实例方法后面跟（） ， 那么实例方法就会自动运行
   2. 实际参数的传递需要使用bind 绑定

   <div> { this.change.bind( this, arg1, arg2 ) } </div>
   

• 在render里调用方法的地方外面包一层箭头函数
• 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
• 通过event传递
• 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用

4. 补充： label
   举例：
   以下那几项是您的兴趣爱好？
   篮球 【】

label使用

1. 和 表单元素 绑定 ， 执行一定效果，比如上面的案例
2. 修改表单元素的默认样式,代替表单元素

<label>
<input type= 'checkbox' className='checkbox' />
</label>

label{
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 30px;
    border: 1px solid red;
 }
label input {
    display: none;
}