イベントリスナー - Hashimoto-Noriaki/react-guide-training GitHub Wiki
2023年04月23日Qiitaに投稿
ユーザが「クリック」や「入力」をした時に発生する処理のことです。 何か押すとモーダルみたいなのが出てきますよね？あれです。
コードを書いてみます。buttonタグにon Clickを記載します。
他にもonChange、onBlurなどがあります。
ここではclickHandlerとclickHandler2を関数にします。
const Example = () => {
const clickHandler = () => {
alert('クリックされた');
}
const clickHandler2 = () => {
alert('クリックされたよ');
}
return (
<>
<button onClick={clickHandler}>クリック</button>
<button onClick={clickHandler2}>クリックして</button>
</>
);
};
export default Example;下のようなボタンが出てきます。今回CSSは無視でいいです。
クリックというボタンを押せば下のようになります。
クリックしてというボタンを押せば下のようになります。
<button onClick={clickHandler()}>クリック</button>にしてしまうと最初からalertが出てしまいます。
<button onClick={()=>{clickHandler()}}>クリック</button>この書き方なら問題なさそうです。
click以外のイベントも見てみます。 Reactでフォームを操作する際に使われるイベントハンドラーを説明します。
・onChangeは入力フォームの内容が変更されたときに実行します。
イベントが発生した要素のvalueプロパティを使用して、新しい値を取得できます。
・onBlurはフォーム要素からフォーカスが外れたときに実行されます。
入力フォームの内容が正しいかどうかをチェックするために使います。
・onFocusはフォーム要素にフォーカスが当てられたときに実行されます。
入力フォームの内容が編集可能であることを示すために使います。
<label>
入力値のイベント：
<input
type="text"
onChange={() => console.log("onChangeをした")}
onBlur={() => console.log("onBlurをした")}
onFocus={() => console.log("onFocusをした")}
/>
</label>これは都合上結果は表示できないので実際に動かしてください。
<label>
入力値：
<input type="text" onChange={(e) => console.log(e.target.value)} />
</label>
</div>
</label>これは都合上結果は表示できないので実際に動かしてください。
<div
className="hover-event"
onmouseEnter={() => console.log("カーソルが入ったよ")}
onmouseLeave={() => console.log("カーソルが出たよ")}
>
ホバーしてね！
</div>データや文字を変更したらその変更点のみが変更されます。
import {useState} from "react";
const Practice = () => {
let [val,setVal] = useState(0);
return (
<>
<input type="text"
onChange={(e) => {
setVal(e.target.value)}}
/>{val}
</>
);
};
export default Practide;フォームに入力されたらフォームの横に入力された文字が入力されます。
https://qiita.com/jima-r20/items/839da7c2f26366491298