事件处理（Day7）

React element 事件 VS DOM element 事件

React element 处理事件跟使用 DOM element 处理事件差异:

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

<element onclick="myScript[String]"> \\React DOM
<element onClick="myScript[Function]"> \\HTML DOM

Class Component VS function component

Class Component 或 function component 稍微有不同的写法，但差不多是

1. 定义 state
2. 定义事件处理 method 或 function
3. 将 this 关键字绑定 method ，或如果是使用 Hook useState 去处理更新资料

以下完整例子

Class Component 事件处理

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'));

function component 事件处理

const { useState } = React;

function Toggle() {
  const [state, setState] = useState(true);
  
  function handleClick(e) {
    e.preventDefault();
    setState(!state)
  }

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

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

将参数传给 Event Handler，注意使用 bind

class Toggle extends React.Component {
  //略
  
  handleClick(id) {
    console.log(id) //#a5aa
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
   
  render() {
    return (
      <button onClick={this.handleClick.bind(this, '#a5aa')}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}      </button>
    );
  }}

//略

其他的绑定方法，arrow function

除了使用 bind 也可以写成 arrow function ，而下一篇会继续介绍为什麽要使用 bind 。

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

以上今天

参考资料：
https://zh-hant.reactjs.org/docs/handling-events.html
理解 JS 里面的 bind