イベントハンドル

ユーザがWebブラウザのDOM要素と対話することをイベント(event)と呼ぶ.HTMLでDOM要素のイベントを設定する方法について説明します.
HTMLをテストするために、外部プロジェクトでコードを作成します.
JSBinで作成することもできます.


HTMLは、これらのイベントを実行するときに" "の間にあるJavaScriptを実行するためのコードを記述します.反応器でイベントを処理するときは少し違います.

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

イベントの使用上の注意

1.イベント名はキャメル記号を使用します。

HTMLのonclickは、応答においてonClickによって記述されなければならない.また、onkeyupはonKeyUpによって記述される.

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

HTMLでイベントを設定すると、二重引用符""に実行するコードが含まれますが、リアクターは関数形式のオブジェクトを渡します.前のボタンの例では、矢印関数構文を使用して関数を作成して渡すように、関数を直接作成して渡すこともできます.また、レンダリング部分の外に関数を事前に作成して渡すこともできます.

3.DOM要素に対してのみイベントを設定できます。

div、button、input、formspanなどのDOM要素にイベントを設定できますが、自分で作成したコンポーネントにイベントを設定することはできません.
たとえば、MyComponentにonClick値を設定する場合、MyComponentをクリックするとdoSomething関数は実行されず、onClickというpropsだけがMyComponentに渡されます.

<MyComponent onClick={doSomething} />

ただし、伝達されたpropsは、素子内部のDOMイベントとして設定することができる.

<div onClick={this.props.onClick}>
  { /* ... */ }
</div>

イベントのタイプ

リアクターでは、イベントのタイプは次のとおりです.
ClipboardTouchCompositionUIKeyboardWheelFocusMediaFormImageMouseAnimationSelectionTransition
これらのすべてのイベントについては、一般的な単純なイベントのみについて説明します.その他のイベントについては、はんのうを参照してください.

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

EventPractice.jsコンポーネントを作成します.

onChangeイベントの処理

onChangeイベント設定

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

Webブラウザを開き、入力ペインに任意の内容を入力します.


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


値を変更するたびにコンソールに書き込まれるようになりました.

stateに入力値を含める

以前習ったstateに値を入力
useStateを使用してe.targetを実行します.ステータスでvalueを更新してみます.

ブラウザを開き、入力に何も入力した場合、コンソールタブにエラーがなく、正しく入力できる場合は、stateにテキストをうまく含めることができます.

ボタンを押すとvalue値が空白に設定されます

入力した値がstateに正しく入力されているかどうか、入力値が正しく反映されているかどうかを確認します.button要素を作成してクリックイベントが発生した場合、alertにvalue値をサスペンションし、value値を空白に設定します.

ランダムメソッドの作成

이벤트를 사용할 때 주의 사항「イベントで実行するJavaScriptコードではなく、関数形式の値を渡します.」私はこのように学んだのですしたがって、イベントを処理するときにレンダリングを行いながら、関数を作成して渡します.このメソッドを使用せずに、関数を事前に準備して渡すこともできます.性能に差はほとんどありませんが、読みやすさはずっと高いです.(ただし、場合によっては内部作成が便利になる場合があります.これは、後で構成部品マッピングを処理するときに学習されます.)
まず、onChangeとonClickに渡される関数を分離して、任意の構成部品を作成する方法です.

複数のinputの処理

inoutが複数ある場合、イベントオブジェクトを使用して簡単に作成できます.
e.target.name値を使用します.オブジェクトに[]を使用してkeyを囲む場合、その中に含まれる参照が指す実際の値がkey値として使用されます.
次に、ユーザーステータスに文字列以外のオブジェクトを挿入してみます.
e.target.nameの値を使用するには、useStateを使用したときに入力した値を含むフォームオブジェクトを使用します.