Event Handling

JS onClick="alert('executed')"のようにイベントハンドルにJSコードを入れる
Reactのイベントシステムは、WebブラウザのHTMLイベントと同じインタフェースを有する.
注意事項
1.キャラメルマーク法を作る!
2.JSコードX、関数形式O
3.DOM要素に対してのみイベントOを設定する:我々が作成したコンポーネントに対してXを設定する
e : synthetic Event. Webブラウザのネイティブイベントを含むオブジェクト.
インタフェース(ネイティブイベントなど)
イベント終了時初期化イベント(Event Polling)-->パフォーマンス上の理由で、情報Xを参照できます.
イベントの伝播による変化は次のとおりです.

システムイベントオブジェクトを繰り返し使用するため、メモリ使用量は小さい.

システムイベントの実行時に1回のみ発生します.

非同期で処理しますか?呼び出しe.persist()関数-->X(呼び出しなし、呼び出し不要)
イベント本文の合成
v 17から、e.persist()は、システムイベントが解放されないため、動作を行わない.
Synthetic Event ?
すべてのブラウザで同じイベントを処理するためのイベント記述子.
nativeEvent ?
ブラウザが必要な唯一のイベントです.onMouseLeave (Synthetic Event) !== mouseout (nativeEvent)

イベントハンドラの登録方法

イベントをHTML要素に直接接続します.

2.任意の関数を作成および指定する方法.
レンダー時に関数を呼び出す場合、この範囲は呼び出し部分によって決まります.
クラス内の任意のメソッドが特定のHTML要素のイベントとして登録されている場合、メソッドとその関係は切断されます.
任意のメソッドがイベントとして登録されたときにコンポーネント自体を正しく指すように、メソッドをthisにバインドする必要があります.


しかし,メソッドを追加するたびに,コンストラクション関数はバインドを必要とする不便を生じる.
矢印関数を使用できます.

handleChange(e) {
    this.setState({
      message: e.target.value,
    })
  } // 바인딩 필요

handleChange = e =>{
    this.setState({
      message:e.target.value
    })
  } // 바인딩 불필요

複数のinputがある場合

複数のメソッドXを作成
-->name属性、O(e.target.name)

handleChange = e =>{
  
  this.setState({  [e.target.name] : e.target.value })

}

keyにonClickを入れると、対応するオーバーフロー値はkey値となる.

var name = 'helloKEY'
const obj = {
 	[name] : 'value'
}
즉,  ===> {'helloKEY' : 'value'}

onKeyPressイベントハンドル

入力数が増加すると、[]を使用するとより良いかもしれません.

import React, { Component } from "react"

const EventPractice = () =>  {
  const [form, setForm] = useState({username : '', message : ''})
  const [username, message] = form
  const onChange =e =>{
    const nextForm = {
      ...form, // 기존의  form을 복사
      [e.target.name] : e.target.value
    }
    setForm(nextForm);
  }
  const onClick = () =>{
    alert(username + ' ' + message);
    setForm({username :'', message :''})
  }

  const onKeyPress = (e) =>{
    if(e.key === 'Enter'){
      onClick();
    }
  }

  render() {
    return (
      <div>
        <h3>이벤트 연습</h3>
        <input
          type="text"
          name="message"
          placeholder="암거나입력"
          value={username}
          onChange={onChange}
          onKeyPress={onKeyPress}
        ></input>
        <input
          type="text"
          name="username"
          placeholder="사용자명"
          value={username}
          onChange={onChange}
        ></input>

        <button
          onClick={onClick}
        >
          확인
        </button>
      </div>
    )
  }
}
export default EventPractice

USStateに書き込み[e.target.name] : e.target.valueを使用すると、入力値を含むオブジェクトが挿入されます([e.target.name]).