【React】イベントの処理方法

2022年4月7日2022年4月22日 souki202

Reactでは、クリックイベントやフォーム送信時のイベントなどを、普通のJavascriptより簡単に設定することができます。

1 イベントの例
2 イベントの設定
3 まとめ

イベントの例

例えば、要素をクリックした際に関数を呼び出すイベントを書いてみます。クリックイベントはonClickです。

export default function Counter(props) {
    const [count, setCount] = useState(props.initValue);
    
    const countUp = () => {
        setCount(count + 1);
    }

    return (
        <>
            <p>カウント: {count}</p>
            <button onClick={countUp}>カウントアップ</button>
        </>
    );
}

onClick={countUp}がイベントの処理になります。onClickの値には、関数の本体をセットします。そうすると、イベント発生時に自動でその関数を呼び出してくれます。

イベントの設定

Reactでは、通常のDOMのイベントとほとんど同じですが、細かい違いがあります。

イベントの種類

Reactでのイベントは、普通のイベントをcamelCaseにしたものです。そのため、普段利用するイベントは一通り使用することができます。

onclick → onClick
onsubmit → onSubmit
onchange → onChange
…

イベントのリストについては、下の記事を参考にしてください。

ブラウザでイベントを発生させて処理をしよう

イベントとは、クリックや読み込み完了など、システムで生じた動作などのことです。ボタンをクリックしたというイベントから何かを動作させる、といった動…

イベントの値を受け取る

イベント発生時のイベントに関する値は、呼び出される関数の第1引数で受け取ることができます。

export default function Counter(props) {
    const [count, setCount] = useState(props.initValue);
 
    const countUp = (e) => {
        console.log(e);
        setCount(count + 1);
    }

    return (
        <>
            <p>カウント: {count}</p>
            <button onClick={countUp}>カウントアップ</button>
        </>
    );
}

onClickイベント発生時の値

SyntheticBaseEvent
    altKey: false
    bubbles: true
    button: 0
    buttons: 0
    cancelable: true
    clientX: 840
    clientY: 77
    ctrlKey: false
    currentTarget: null
    defaultPrevented: false
    detail: 1
    ...

例えばe.targetとすると、イベントが発生したDOMを取得することができます。e.target.innerHTMLのように、普段のイベントと同じように取得可能です。

preventDefault

通常のイベントでは、関数でreturn false;することでデフォルトの動作をキャンセルできました。Reactでは、e.preventDefaultする必要があります。

export default function MyForm() {
    const handleSubmit = (e) => {
        // 送信処理など...

        e.preventDefault();
    }

    return (
        <form onSubmit={handleSubmit} method="get">
            <input type="submit" value="submit" />
        </form>
    )
}

無名関数を直接入れる

イベントには関数の本体を設定すると動作します。そのため、無名関数を入れることでも動作させることが可能です。

<button onClick={() => {setCount(count + 1)}}>カウントアップ</button>

イベントを転送する例

export default function Counter(props) {
    const [count, setCount] = useState(props.initValue);
 
    const countUp = (i, e) => {
        setCount(count + i);
    }

    return (
        <>
            <p>カウント: {count}</p>
            <button onClick={(e) => {countUp(3, e)}}>カウントアップ +3</button>
        </>
    );
}

これを応用して、例えばfor文で生成したものでindexをセットする、といったこともできます。

export default function Counter(props) {
    const [count, setCount] = useState(props.initValue);
 
    /**
     * 
     * @param {React.SyntheticBaseEvent} e 
     */
    const countUp = (i, e) => {
        setCount(count + i);
    }

    return (
        <>
            <p>カウント: {count}</p>
            {(() => {
                const dom = [];
                for (let i = 1; i < 4; i++) {
                    dom.push((
                        <button onClick={(e) => {countUp(i, e)}}>カウントアップ +{i}</button>
                    ));
                }
                return dom;
            })()}
        </>
    );
}

イベントなどの設定では無名関数を直接入れるのは問題ありません。しかし、propsとして渡すのに無名関数を直接入れてしまうと、パフォーマンスに問題が出る場合があります。関数は、作られる度に本体は同じでも値としては変化するため、コンポーネントが再レンダされてしまうためです。

詳しくはuseCallback関連の内容を確認してください。