事件和 ref

事件可以直接写到 DOM 节点，然后通过 ref 来获取 DOM 节点

import React from "react";
import ReactDOM from "react-dom";

class Component1 extends React.Component {
  focusHandler() {
    this.refs.name.focus();
  }
  render() {
    return (
      <div>
        <input type="text" name="name" placeholder="" ref="name" />
        <input
          type="button"
          name=""
          value="focus"
          onClick={this.focusHandler}
        />
      </div>
    );
  }
}

ReactDOM.render(<Component1 />, document.getElementById("div1"));

事件对象 —— event

React 在事件方法调用上默认会传一个形参events，该对象是一个合成事件，所以不需要担心浏览器兼容的问题。

import React from "react";
import ReactDOM from "react-dom";

class Component1 extends React.Component {
  submit(e) {
    e.target.style.color = "red";
  }
  render() {
    return <input type="button" value="submit" onClick={this.submit} />;
  }
}

ReactDOM.render(<Component1 />, document.getElementById("app"));

事件 —— this 指针

在所有的事件当中，首先都要弄明白 this 指向哪里。而 React 事件中（如上面的案例）默认的 this 都是 undefined，为了 this 指针能正确指回组件对象本身，通常可以用下面几种方法。

事件定义使用箭头函数

class Component1 extends React.Component {
  submit = (e) => {
    console.log(this);
    e.target.style.color = "red";
  };
  render() {
    return <input type="button" value="submit" onClick={this.submit} />;
  }
}

事件调用时使用用箭头函数

class Component1 extends React.Component {
  submit(e) {
    console.log(this);
    e.target.style.color = "red";
  }
  render() {
    return (
      <input type="button" value="submit" onClick={(e) => this.submit(e)} />
    );
  }
}

构造函数中使用 bind

class Component1 extends React.Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }
  submit(e) {
    console.log(this);
    e.target.style.color = "red";
  }
  render() {
    return <input type="button" value="submit" onClick={this.submit} />;
  }
}

事件调用时用 bind

class Component1 extends React.Component {
  submit(e) {
    console.log(this);
    e.target.style.color = "red";
  }
  render() {
    return (
      <input type="button" value="submit" onClick={this.submit.bind(this)} />
    );
  }
}

事件传参数

事件调用时使用用箭头函数

class Component1 extends React.Component {
  submit(e, n) {
    console.log(this, n);
    e.target.style.color = "red";
  }
  render() {
    return (
      <input
        type="button"
        value="submit"
        onClick={(e) => this.submit(e, 100)}
      />
    );
  }
}

事件调用时用 bind

    submit(n, e){
        console.log(n)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit.bind(this, 20)}/>
    }
}