4.2例によってイベントハンドルを熟知する

4.2.1.1構成部品の作成

//EventPractice.js

import React, {Component} from 'react';

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

export default EventPractice;

4.2.2.2 stateに入力値を含める

EventPracticeコンポーネントに入力要素を表示するコードと、その要素にonChangeイベントを設定するコードを記述し、EventPracticeコンポーネントの表示方法で作成します.

//EventPractice.js

import React, {Component} from 'react';

    class EventPractice extends Component {
      render() {
          return (
              <div>
                  <h1>이벤트 연습</h1>
                  <input 
                    type="text"
                    name="message"
                    placeholder="아무거나"
                    onChange={
                        (e) => {
                            console.log(e);
                        }
                    }
                />
            </div>
          )
      }  
    }

export default EventPractice;

👇 コンソール成果物

💡 EventPractice.jsのonChange設定セクションを再表示

onChange={(e) => {console.log(e);}

コンソールに記録されているeオブジェクトは、Webブラウザのネイティブイベントを囲むSyntheticEventです.ネイティブイベントと同じインタフェースを持ち、純粋なJavaScriptでHTMLイベントを処理する場合と同様に使用できます.ただし、SyntheticEventはネイティブイベントとは異なり、アクティビティ終了後に初期化され、情報を参照できません.たとえば、0.5秒後にeオブジェクトが参照されると、eオブジェクト内のすべての値が空になります.(イベントオブジェクトを非同期で参照するには、e.persist()関数を呼び出す必要があります)
たとえば、onChangeイベントが発生したときに変更する入力値e.target.valueをコンソールに記録します
💡 EventPractice.js上のonChangeコードの変更

onChange={(e) => {console.log(e.target.value);}

4.2.2.1 onChangeイベントの設定

コンストラクタで状態秒値

を設定する.

イベントハンドル関数の内部でthis.setStateメソッドの呼び出し(ステータス更新)

inputの値を状態値

に設定.

//EventPractice.js

import React, {Component} from 'react';

    class EventPractice extends Component {
        state = {
            message: ''
        }
         render() {
             return (
                 <>
                    <h1>연습</h1>
                    <input 
                        type= "text"
                        name= "message"
                        placeholder= "아무거나"
                        value={this.state.message}
                        onChange= {
                            (e) => {
                                this.setState({
                                    message: e.target.value
                                })
                            }
                        }
                    >
                    </input>
                 </>
             )
         }
      }  

export default EventPractice;

入力がエラーではなく正しい場合はstateにテキストをうまく含めることができます.

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

入力した値がstateに正しく入力されているかどうかを確認するために、入力で3つの操作を行います.

input要素コードの下部にボタンを作成します.

クリックイベントが発生した場合、現在のコメント値をメッセージボックスに移動します.

コメント値を空に設定します.

//EventPractice.js

import React, {Component} from 'react';

    class EventPractice extends Component {
        state = {
            message: ''
        }
         render() {
             return (
                 <>
                    <h1>연습</h1>
                    <input 
                        type= "text"
                        name= "message"
                        placeholder= "아무거나"
                        value={this.state.message}
                        onChange= {
                            (e) => {
                                this.setState({
                                    message: e.target.value
                                })
                            }
                        }
                    >
                    </input>
                    <button onClick= {
                        () => {
                            alert(this.state.message)
                            this.setState({
                                message:''
                            })
                        }
                    }>
                        확인
                    </button>
                 </>
             )
         }
      }  
    
export default EventPractice;

4.2.3ランダムメソッドの作成

伝達関数を事前に用意しておけば,性能に差はないが,可読性は高い.(場合によっては、レンダリング方法の内部に関数を作成する方が便利な場合があります.)
onChangeとonClickに渡される関数を分離し、構成部品のランダムメソッドを作成します.

4.2.3.1基本方式

EventPractice .js
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 (
                 <>
                    <h1>연습</h1>
                    <input 
                        type= "text"
                        name= "message"
                        placeholder= "아무거나"
                        value={this.state.message}
                        onChange= {this.state.handleChange}
                    >
                    </input>
                    <button onClick= {this.handleClick}>확인</button>
                 </>
             )
         }
      }  
    

export default EventPractice;

関数が呼び出されると、これは呼び出し元に依存するため、クラス内の任意のメソッドが特定のHTML要素のイベントとして登録されると、メソッドとこの関係は切断されます.したがって、任意のメソッドをイベントとして登録しても、コンポーネント自体を正しく指すためには、メソッドをこのバインド(binding)する必要があります.バインドされていない場合、thisはundefinedを指します.

4.2.3.2 Property Initializer Syntaxを使用する方法

ジェネレータメソッドでメソッドをバインドするのは慣例ですが、メソッドを作成するたびにコンストラクション関数を変更する必要があるため、不便に感じる可能性があります.したがって,より簡単な方法はバーベルのtransform−class−properties構文を用いて矢印関数の形で整理する方法である.

import React, {Component} from 'react';

    class EventPractice extends Component {
        state = {
            message: ''
        }

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

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

         render() {
             return (
                 <>
                    <h1>연습</h1>
                    <input 
                        type= "text"
                        name= "message"
                        placeholder= "아무거나"
                        value={this.state.message}
                        onChange= {this.handleChange}
                    >
                    </input>
                    <button onClick= {this.handleClick}>확인</button>
                 </>
             )
         }
      }  
    

export default EventPractice;