イベントの処理

onClick

Reactは、文字列ではなくJSXを使用してイベントハンドラを関数に渡します.

<button onClick={() => alert('hello')}>Submit</button>

上のコードは、lambda関数をonClickのオブジェクトとして使用し、Submitボタンをクリックしたときに「hello」文字を表示するコードです.

注意!

<button onClick={alert('hello')}>Submit</button>

上記のコードのように、JavaScriptコードではなくonClickオブジェクトに直接関数を書き込む場合は、最初のレンダリング時にボタンを押さずにalert関数をすぐに実行でき、その後Submitボタンを押すとalert関数は実行されないので注意してください.常に関数を含めるためにコードを作成する必要があります.

const onSubmit = () => {
	alert('submitted');
};

return (
	<button onClick={onSubmit}>Submit</button>
)

もう1つの方法は、onSubmitという関数(上記のコードに示すように)を作成し、onClickのオブジェクト部分に配置して、イベントをよりよく処理することです.

onKeyUp

onKeyUpとは、キーボードを押すと、キーボードが昇ると指定した関数が実行されるイベントです.

const onKeyUp = () => {
	console.log('key up');
};

return (
	<input onKeyUp={onKeyUp}/>
}

イベントをキーボードを押すたびにconsoleウィンドウに「keyup」が表示されるように設定すると、helloを入力すると、consoleウィンドウに「keyup」ログが5回記録されます.

enterを使用して公告

を発行する

function App() {
  
  const onSubmit = () => {
    alert('submitted');
  };

  const onKeyUp = (event) => {
    // 'enter'키의 keycode는 13
    if (event.keyCode === 13) {
      onSubmit();
    }
  };

  return (
    <div className="App">
      <input onKeyUp={onKeyUp} />
      <button onClick={onSubmit}>Submit</button>
    </div>
  );
}

「enter」のkeycodeは13で、Enterが押されたときにonSubmit関数を実行できます.