【Day07】事件处理 Handling Events

React 事件处理

React 和 HTML 事件处理的语法略有不同：

HTML 的事件语法：

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

React 的事件语法：

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

比较

• 事件名称
  • 在 React 中是 camelCase
  • 在 HTML DOM 中是小写
• 事件的值
  • 在 JSX 中是一个 function
  • 在 HTML DOM 中是一个 string

避免浏览器预设行为

在 React 中要避免浏览器预设行为
必须明确呼叫 preventDefault

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

this 绑定

JavaScript 中，class 的方法预设是没有被绑定（bound）的
如果在未绑定的状况下呼叫，this 会变成 undefined

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了让 `this` 能在 callback 中被使用，这里的绑定是必要的：
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

如不绑定，也可以使用箭头函式（ arrow function）

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 这个语法确保 `this` 是在 handleClick 中被绑定：
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

参考资料

• 事件处理