事件处理

事件处理

• React 事件的命名采用小驼峰式，而不是纯小写
• 使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个字符串

  //传统的HTML传入的是字符串
  <button onclick="activateLasers()">
    Activate Lasers
  </button>
  
  //在React中传入的是函数
  <button onClick={activateLasers}>
    Activate Lasers
  </button>
  

• 在React中不能通过false的方式阻止默认行为
  必须显示的使用 preventDefault

  //在HTMl中
  <a href="#" onclick="console.log('The link was clicked.'); return false">
    Click me
  </a>
  

  // 在React中
  function ActionLink() {
     // e是一个合成事件，React 根据 W3C 规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题
    function handleClick(e) {
      e.preventDefault();
      console.log('The link was clicked.');
    }
  
    return (
      <a href="#" onClick={handleClick}>
        Click me
      </a>
    );
  }
  

---

JSX回调函数中的this

• 在回调函数中使用this，得在构造函数中进行绑定，如果不绑定，当你调用这个函数的时候this的值为undefined

  class Toggle extends React.Component {
    constructor(props) {
      super(props);
      this.state = {isToggleOn: true};
  
      // 为了在回调中使用 `this`，这个绑定是必不可少的
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState(state => ({
        isToggleOn: !state.isToggleOn
      }));
    }
  
    render() {
      return (
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
      );
    }
  }
  
  ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
  );
  

  ---

• 解决上述问题的方法1：

  	class LoggingButton extends React.Component {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    // 注意: 这是 *实验性* 语法。
    handleClick = () => {
      console.log('this is:', this);
    }
  
    render() {
      return (
        <button onClick={this.handleClick}>
          Click me
        </button>
      );
    }
  }
  

• 解决上述问题的方法2：使用箭头函数

  class LoggingButton extends React.Component {
    handleClick() {
      console.log('this is:', this);
    }
  
    render() {
      // 此语法确保 `handleClick` 内的 `this` 已被绑定。
      return (
        <button onClick={() => this.handleClick()}>
          Click me
        </button>
      );
    }
  }
  

---

向事件处理程序传递参数

• 在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

  <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
  

• 上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。