< 关於 React: 开始打地基| 事件处理 >

09-11-2021

本章内容

• 事件处理的不同写法
  • 事件处理
  • 事件的值
  • React中的预设行为
• 将参数传给 Event Handler

事件处理的不同写法

React element的处理事件与DOM element处理类似，但有语法上的差异。

1. 事件处理：在React上都是驼峰写法(camelCase); 在HTML DOM中为小写
2. 事件的值：在JSX中是一个function;在HTML DOM中是一个string

// 在HTML 中的写法
<button onclick="activateLasers()">
  Activate Lasers
</button>

// 在JSX中的写法
<button onClick={activateLasers}>
  Activate Lasers
</button>

3. 在React中不能使用retuen false，来避免浏览器的预设行为;而是使用PreventDefault

// 在HTML中写法
<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

// 在React 中写法
function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }
// e 在这里是一个事件（synthetic event）
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

4. 在使用React就不需要建立一个DOM element後使用addEventListner加上listner，只需要在这个element在一开始被render时提供一个listener

// 使用箭头函式的写法
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

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

将参数传给 Event Handler

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
// 使用箭头函示
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
// 使用Function.prototype.bind

e 这个参数会被当作ID之後的第二个参数传递下去。在箭头函示时，必须明确的传递;若使用bind语法，将会传递任何参数下去。