React事件

原生js — 事件

事件概念
构成
1. 谁触发: DOM
2. 事件触发的形式： on addEventListener
3. 事件类型: click keyup keydown
4. 事件处理程序
5. 事件对象
6. 事件传参
```
  var box = doucment.querySelector( 'div' )

  box.onclick = function(){
    //事件处理程序
  }
```

React – 事件

写法一共四种，

箭头函数

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

在constructor函数中bind this

  class App extends React.component{
    constructor () {
      super()

      this.change = this.change.bind( this )
    }
    change () {
      this.setStatge({})
    }
  }

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

注意：
1. React中如果直接在实例方法后面跟（），那么实例方法就会自动运行
2. 实际参数的传递需要使用bind 绑定
javascript <div> { this.change.bind( this, arg1, arg2 ) } </div>

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

小案例

import React, { Component,Fragment } from 'react';

import './index.css'

class Login extends Component {

  constructor () {
    super ()
    
//先把姓名设置为空

    this.state = {
      firstname: '',
      lastname: ''
    }
  }

//改变fastname的值,值为输入框的值
  firstName = ( e ) => {
    this.setState({
      firstname: e.target.value
    })
  }

//改变lastname的值,
  lastName = ( e ) => {
    this.setState({
      lastname: e.target.value
    })
  }

  render () {
  结构name 和lastname
    let { firstname,lastname } = this.state
    return (
      <Fragment>

        <div>
          姓： 
          <input 
            placeholder = "请输入您的姓"
            onBlur = { this.firstName }  
          />
        </div>
        <div>
          名： 
          <input 
            placeholder = "请输入您的名"
            onBlur = { this.lastName }   
          />
        </div>

        <p> 我的名字是: { firstname } { lastname } </p>

      </Fragment>
    )
  }

}

export default Login

当输入框失去焦点是,自动添加到另一个输入框

原生js — 事件

React – 事件

小案例

猜你喜欢