[React] Event Handling

Event Handling
JavaScriptでは、addEventListnerというイベントハンドラを使用しています.Reactがどのように機能を実現するかを見てみましょう.
Event Handling
1.概念
HTML DOMをクリックすると、イベントが発生し、それに応じて変更されるのがイベント処理です.JSXでイベントを設定できます.もちろん、ダブルクリックまたはhoverのような複数のイベントを処理することができる.
2.文法
まず、CamelCaseとしてしか使えません.例えば、onClickおよびonMouseEnterである.
イベントに関連付けられたJavaScriptコードは関数です.이벤트={함수}と一緒に使用できます.
最後に、実際のDOM要素にのみ適用されます.反応素子に使用される場合、propsにしか伝達できない.
3.関数構成部品
では、コードの例を見てみましょう.まず、関数要素を使用するコードです.

function Component() {
  return (
    <div>
      <button
        onClick={() => {
          console.log("clicked");
        }}
      >
        클릭
      </button>
    </div>
  );
}

ReactDOM.render(<Component />, document.querySelector("#root"));

4.クラス構成部品
これは、クラスコンポーネントを使用してイベントハンドラを作成するコードです.

class Component extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button
          onClick={() => {
            console.log("clicked");
            this.setState((state) => ({ ...state, count: state.count + 1 }));
          }}
        >
          클릭
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Component />, document.querySelector("#root"));

クリックすると、コンソールウィンドウにclickedが表示され、ゼロからstateの値をクリックするたびにコードが1増加するコードが実行されます.
5.方法
次に、onClickに符号化されたコンテンツを処理するために異なる方法を使用する方法について説明する.

class Component extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭</button>
      </div>
    );
  }

  click = () => {
    console.log("clicked");
    this.setState((state) => ({ ...state, count: state.count + 1 }));
  };
}

また、クラス構成部品からclickと呼ばれる方法にイベント処理を分離することもできます.