イベントシステム

リアクターのイベントシステムはWebブラウザのHTMLイベントと同じインタフェースを持つため,使用方法は非常に似ている.

イベントの使用上の注意

アクティビティ名はキャメル記号で書きます
(ex.HTMLのonClickは、応答でonClickを使用して記述する必要があります.)

イベントで実行するJavaScriptコードではなく、関数形式の値を渡します.
矢印関数構文で関数を作成して渡すこともできます.
可読性のためには、レンダリング部分の外部で予め作成しておき、鳴くように伝達することが望ましい.

イベントはDOM要素でのみ設定できます.
div、button、input、form、spanなどのイベントを設定できますが、自分で作成したコンポーネントのイベントを設定することはできません.

イベントのタイプ

Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection, Touch, UI, Wheel, Media, Image, Animation, Transition

イベントハンドル

構成部品の作成とロード->onChangeイベントハンドル->ランダムメソッドの作成->input複数->onKeyPressイベントハンドル

構成部品の作成とロード

import React, { Component } from "react"; //EventPractice.js

class EventPractice extends Component {
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
      </div>
    );
  }
}

export default EventPractice;


import EventPractice from "./EventPractice"; // App.js

const App = () => {
  return <EventPractice />;
};

export default App;

イベントハンドル

<input
  type="text"
  name="message"
  placeholder="아무거나 입력해 보세요"
  onChange={(e) => {
    console.log(e.target.value);
  }}
/>

input要素をレンダリングし、要素にonChangeイベントを処理するコードを記述します.eオブジェクトは、WebブラウザのネイティブイベントをSyntheticEventで囲むオブジェクトです.
onChangeイベントが発生した場合、その後の変更の入力値=(e.target.value)

stateに入力値を含める

constructorでステータス初期値を設定し、イベント処理関数でこの値を設定します.setStateメソッドを呼び出してstateを更新します.

class EventPractice extends Component {
  state = {
    message: "",
  };
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={(e) => {
            this.setState({
              message: e.target.value,
            });
          }}
        />
      </div>
    );
  }
}

ランダムメソッドの作成

パフォーマンス上、レンダリング時に関数を作成および転送する方法は、事前に作成および転送する方法とほとんど変わりません.
予め方法を決めて伝える方式の可読性はずっと高い.

import React, { Component } from "react";

class EventPractice extends Component {
  state = {
    message: "",
  };

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

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

  handleClick() {
    alert(this.state.message);
    this.setState({
      message: "",
    });
  }

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

export default EventPractice;

任意のメソッドを呼び出す場合、これは呼び出し元に依存するため、任意のメソッドがHTML要素イベントに登録される過程で、メソッドとthisの関係が切断されます.
いずれかの方法がイベントとして登録されている場合、方法および方法this.handleChange.bind(this)は、コンポーネント自体を指すようにバインドされる必要がある.
バインドされていない場合、これはundefinedを指します.

Property Initializer Syntaxを使用した作成方法

メソッドバインドは、생성자 메서드(constructor)で行われる慣例である.
しかし、メソッドを作成するたびにconstructor度を変更するのは不便です.
この作業をより簡単にするために、バーベルのtransform-class-properties構文を使用して、矢印関数としてメソッドを定義できます.

// 적용 전 메서드 정의
handleChange(e) {
  this.setState({
    message: e.target.value,
  });
}

// 적용 후 메서드 정의
handleChange = (e) => {
  this.setState({
    message: e.target.value,
  });
};

メソッドとthisをバインドする必要はありません.(this.handleChange.bind(this))
コンストラクション関数メソッドを使用する必要はありません.

同じ方法で複数の入力を処理

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

<input type="text" name="username" placeholder="사용자명" onChange={this.handleChange} value={this.state.username} />
<input type="text" name="message" placeholder="아무거나 입력해보세요" onChange={this.handleChange} value={this.state.message} />

オブジェクトでkeyが[]で囲まれている場合、その中に含まれるreprenceの値がkey値として使用されます.
最初の入力では、メソッドが呼び出され、{username:e.target.value(入力した値)が呼び出されます.
2番目の入力は{message:e.target.value}です.

onKeyPressイベントハンドル

キーを押したときに発生するキーPressイベントを処理できます.

handleKeyPress = (e) => {
  if (e.key === "Enter") {
    this.handleClick();
  }
};


<input type="text" name="message" placeholder="아무거나 입력해보세요" onKeyPress={this.handleKeyPress} onChange={this.handleChange} value={this.state.message} />

フォーカスが2番目のinput要素にある場合、Enterを押すとhandleKeyPressメソッドが実行されます.

関数構成部品に変更

import React, { useState } from "react";

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

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

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

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

export default EventPractice;