React 元素的事件处理

• React 事件绑定属性的命名采用驼峰式写法，而不是小写(DOM 元素的写法)。

• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

// 传统HTML
<button onclick="activateLasers()">Activate Lasers</button>

// React
<button onClick="{activateLasers}">Activate Lasers</button>

• 阻止默认的行为不能使用返回 false 的方式必须使用 e.preventDefault()

• 类的方法默认不会绑定 this，有四种方法可以解决

  • 在 constructor 中绑定
  • 在 render 函数中绑定
  • 使用箭头函数
  • 使用属性初始化器

class App extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      num: 1,
      title: ' react study',
    };
    this.handleClick2 = this.handleClick1.bind(this);
  }
  handleClick1() {
    this.setState({
      num: this.state.num + 1,
    });
  }
  handleClick3 = () => {
    this.setState({
      num: this.state.num + 1,
    });
  };
  render() {
    return (
      <div>
        <h2>Ann, {this.state.num}</h2>
        <button onClick={this.handleClick2}>btn1</button>
        <button onClick={this.handleClick1.bind(this)}>btn2</button>
        <button onClick={() => this.handleClick1()}>btn3</button>
        <button onClick={this.handleClick3}>btn4</button>
      </div>
    );
  }
}

在 JS 中，class 的方法默认不会绑定 this，所以 this 使用默认绑定，在严格模式下是 undefined。所以在传递函数的时候必须绑定 this。

合成事件

react SyntheticEvent 是浏览器原生事件跨浏览器的包装器。当需要使用浏览器的底层事件时只需要使用 nativeEvent 来获取即可。

以下事件处理函数在冒泡阶段被触发，如需注册捕获阶段的事件处理函数，只需添加 Capture 即可。例如：onClickCapture。

• 键盘事件
  • onKeyDown
  • onKeyPress
  • onKeyUp
• 焦点事件
  • onFocus
  • onBlur
• 表单事件
  • onChange
  • onSubmit
• 鼠标事件
  • onClick
• ...