state値を変更する必要がある場合は、setStateまたはusStateで渡されるsetter関数を使用する必要があります.(setState = class component, useState = function component)

配列またはオブジェクトを更新する場合は、レプリカを作成してからレプリカで値を更新し、setStateまたはsetter関数でレプリカのステータスを更新する必要があります.

オブジェクトのコピーを作成する場合は、展開演算子と呼ばれます...を使用して処理し、アレイのコピーを作成するときにアレイの組み込み関数を使用します.

整理する

propsとstateには、構成部品で使用またはレンダリングするデータが含まれています.似ているように見えますが、それらの役割は非常に異なります.
props
親コンポーネント

によって設定された

値無条件固定

state

要素自体が持つ値は、要素内部で値を更新することができる.

親構成部品のステータスを子構成部品のpropsに渡し、子構成部品に特定のイベントが発生したときに親構成部品を呼び出す方法も柔軟に使用できます.

第四章。イベントハンドル

ユーザがWebブラウザでDOM要素と対話することをイベント(event)と呼ぶ.JavaScriptでイベントを処理するのと似ていると思ったら、勉強すればいいです.

4.1反応のイベントシステム

4.1.1イベント使用時の注意事項

1.活動名はキャメル記号で記入
2.実行イベントのJavaScriptコードを渡すのではなく、関数形式の値を渡す

リアクターでは、関数形式のオブジェクトを渡す必要があります.矢印関数構文で渡す必要があります.直接作成して渡すことも、レンダリング部分の外部で事前に作成して渡すこともできます.

3.DOM要素でのみイベントを設定できます

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

<MyComponent onClick={doSomething}/>

したがって,イベントを自分で設定することはできないが,渡されたpropsをコンポーネント内部DOMイベントに設定することができる.

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

4.1.2活動タイプ

Clipboard

Composition

Keyboard

Focus

Form

Mouse

Selection

Touch

UI

Wheel

Media

Image

Animation

Transition

👉 より多くのアクティビティを表示しますか?公式サイト