Event Handling

🎈リアクター内のイベントシステム

🧨イベントの使用上の注意

アクティビティ名はcamelCaseで命名されています.

HTMLのonClickはReactによってonClickに書き込まれます.

onkeyup -> onKeyUp

イベントで実行されるJavaScriptコードではなく、関数形式の値が渡されます.

HTMLは、イベントの設定時に二重引用符で実行されるコードです.

反応器伝達関数形式のオブジェクト.

イベントは

DOM要素にのみ設定できます.
イベントは、

div、button、input、form、spanなどのDOM要素に設定できますが、独自に作成したコンポーネントには設定できません.

🎁イベントのタイプ

clipboard

Composition

Form

Mouse

Keyboard

Selection

Focus

Touch

UI

Wheel

Media

🎁onChange Event

import React, {Component} from "react";

class EventPractice extends Component{
    state={
        message:''
    }
    render(){
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input 
                type = "text" //input의 type
                name = "message" //input의 제목.
                placholder = "아무거나 입력하시오." //hint
                value={this.state.message}
                onChange={
                    (e)=>{
                        this.setState({message:e.target.value})
                    }
                }
                />
                <button onClick={
                    () => {
                        alert(this.state.message);
                        this.setState({
                            message:''
                        })
                    }
            }
                    >확인</button>
            </div>
        )
    }
}

export default EventPractice;

input

値:this.state.メッセージに設定します.(ステータス値を更新するたびに値を指定します.)

onChange:setStateメッセージの値e.target.value(ユーザーが作成した値)を指定します.

button

ボタンをクリックするたびにalertでメッセージの値が表示されます.

以降、メッセージ内の値を空白に置き換えることで、入力中の値も空白になります.(接続済み)

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

イベントで実行されるJavaScriptコードではなく、関数形式の値を渡します.

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(e){
        this.setState({
            message: ''
        });
    }
    render(){
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input 
                type = "text" //input의 type
                name = "message" //input의 제목.
                placholder = "아무거나 입력하시오." //hint
                value={this.state.message}
                onChange={this.handleChange}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}

export default EventPractice;

上記のコードと性能にはほとんど差はありませんが、読みやすさはずっと高いです.

🧨Property Initializer Syntax

ジェネレータメソッドでバインドする方法が慣例です.
しかし、この仕事は不便だと思うかもしれません.新しいメソッドを作成するたびに、コンストラクション関数を変更する必要があるためです.
これは、このタスクを簡略化する方法です.
バーベルのtransform-class-properties構文を使用して、矢印関数としてメソッドを定義できます.() =>{}

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

注:<反応器を使用する技術>