🧑‍💻 React study 4.

Chapter 4.

イベントハンドル

4.1反応のイベントシステム
4.1.1イベント使用時の注意事項

1) 이벤트 이름은 카멜 표기법으로 작성.

2) 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.

3) DOM 요소에만 이벤트를 설정 할 수 있다.

4.1.2活動タイプ
リアクターがサポートするイベントの種類はいろいろあるので、やるたびにグーグルしておけばいい!
4.2イベントハンドル
4.2.1構成部品の作成とロード
1)構成部品の作成

2)構成部品のインポート

4.2.2 onChangeイベントの設定
EventPracticeコンポーネントで入力要素をレンダリングするコードと、これらの要素にイベントを設定するコードを記述します.

// onChange 설정 부분
onChange{
  (e) => {
    console.log(e);
  }
}

上のコードでは、eはSyntheticEventであり、Webブラウザのブラウザイベントを囲むオブジェクトです.

// 이벤트가 발생 할 때 마다 input 되는 값을 변경 해준다.
onChange = { 
  (e) => {
    console.log(e.target.value);
  }
}

4.2.2.1 stateに入力値を含める

4.2.2.2ボタンの場合コメント値を空白にする


4.2.3ランダムメソッドの作成
1)基本的な方法
onChangeとonClickに渡される関数を分離して任意の構成部品を作成する方法

関数が呼び出されると、これは呼び出し部分に依存します.
メソッドをイベントとして登録し、コンポーネント自体を正しく指す場合は、メソッドをバインドする必要があります.
メソッド名ルール
イベントの処理方法についてはhandle*形式で作成
2)Property Initializer Syntaxを使用した作成方法
メソッドバインドはジェネレータメソッドで慣例です.
ただし、新しいメソッドを作成するたびにコンストラクション関数を変更する必要があるため、不便な点があります.
解決方法は矢印関数として定義できます.

  handleChange = (e) => {
    this.setState({
      message: e.target.value,
    });
  };

  handleClick = () => {
    alert(this.state.message);
    this.setState({
      message: '',
    });
  };

4.2.4複数入力の処理
イベントオブジェクト設定stateを使用すると、問題を簡単に解決できます.

// 핵심 코드
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

オブジェクトに[]を使用してkeyを囲む場合、その中に含まれるreprenceが示す実際の値がkey値として使用されます.

const name = 'david';
const object = {
  [name]: 'value';
};

// 결과 값
{
  'david': 'value'
}

4.2.5 onKeyPressイベントハンドル

4.3関数素子として実施
1) e.target.nameを使用せずに2つのonChange関数を作成