第4章イベントハンドル(応答を記述する技術)

ユーザがWebブラウザのDOM要素と対話することをイベント(event)と呼ぶ.
イベントの使用上の注意
1.イベント名はキャメル記号を使用します.
HTMLのonClickは、応答でonClickとして作成する必要があります.
2.イベントで実行するJavaScriptコードではなく、関数形式の値を渡します.
HTMLでイベントを設定すると、実行するコードを二重引用符で挿入しますが、リアクターは関数形式のオブジェクトを渡します.
3.DOM要素に対してのみイベントを設定できます.
div、button、input、form、spanなどのDOM要素にイベントを設定できますが、自分で作成したコンポーネントにイベントを設定することはできません.
stateにinputを含める

import React, { useState } from "react";

export default function EventPractice() {
  const [message, setMessage] = useState("");
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={(e) => {
          setMessage(e.target.value);
        }}
      />
      <button
        onClick={() => {
          alert(message);
          setMessage("");
        }}
      >
        확인
      </button>
    </div>
  );
}

ランダムメソッドの作成onChangeとonClickに渡される関数を分離し、任意の要素を作成する方法.

import React, { useState } from "react";

export default function EventPractice() {
  const [message, setMessage] = useState("");

  const onChange = (e) => {
    setMessage(e.target.value);
  };

  const onClick = () => {
    alert(message);
    setMessage("");
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChange}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
}

複数のinputの処理

mport React, { useState } from "react";

export default function EventPractice() {
  const [message, setMessage] = useState("");
  const [username, setUsername] = useState("");
  const onChangeUsername = (e) => setUsername(e.target.value);
  const onChangeMessage = (e) => setMessage(e.target.value);

  const onClick = () => {
    alert(username + ": " + message);
    setMessage("");
    setUsername("");
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChangeUsername}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChangeMessage}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
}

onKeyPressイベントハンドル
入力中にEnterキーを押すと、呼び出しonClickメソッドが記述される

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

...

<input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChangeUsername}
        onKeyPress={onKeyPress}
      />

e.target.nameの利用e.target.nameを使用するには、上記のuseStateで入力した値を含むform 객체を使用します.

import React, { useState } from "react";

export default function 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();
    }
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
}

また、usStateのformオブジェクトを使用して関数化構成部品の複数の入力ステータスを管理する方法も学習しました.8章で学習するuseReducerとCustom Hooksを使用すると、このタスクをより簡単に完了できます.