反応のフォームとイベントを理解する

このチュートリアルでは、Reactイベント、制御されたコンポーネント、イベント処理について説明し、管理されたフォームを構築し、子から親コンポーネントにデータを発する方法を示します。 Reactを使用してユーザープロファイルフォームを作成しましょう

最初に、新しいReactアプリを作成します。

にあるコンポーネントは、ユーザープロファイルの詳細のフォームをレンダリングします。 ルートコンポーネントにインポート（

）：UserProfile src/UserProfile.js src/App.js

：

import UserProfile from './UserProfile';

function App() {
  return (
    <div classname="App">
      <userprofile></userprofile>
    </div>
  );
}

export default App;

を使用してフォームをスタイルします

src/App.cssレンダリングされたフォームは、最初はアプリケーション状態にバウンドされません。 フォーム入力を州に接続するには、イベントハンドラーを使用します。

イベントの反応

.App {
  text-align: left;
  margin-left: 20%;
  margin-right: 20%;
}

label {
  display: inline-block;
  margin-right: 1em;
  width: 4em;
}

input {
  width: 15em;
}

Reactイベントは、ユーザーインタラクションまたはシステムイベント（クリック、キープレス、ページのロードなど）によってトリガーされるアクションです。 入力の変更を処理するために、

イベントを使用します。

：

の入力を変更します

同様に、それぞれの状態変数とonChangeフックを使用して、name、UserProfile.js、および

入力を更新します。

<input id="name-field" type="text" value="{name}" onchange="{(e)"> setName(e.target.value)}
/>

状態を記録するには、関数を

：emailに追加します age password[送信]ボタンを更新して、useState：

を呼び出します

UserProfile.js [送信]フォームデータをコンソールにクリックします。 これは、双方向のデータバインディングを示しています：ビューの変更状態を更新し、状態の変更はビューを更新します。 イベントを放射する

const logState = () => {
  console.log(name);
  console.log(email);
  console.log(age);
  console.log(password);
};

子からのデータを親（logState）に送信するには、イベントを発します。

：

<button onclick="{logState}">Submit</button>

に

関数を追加します

[送信]ボタンを更新して、

：

を呼び出します UserProfile Appさて、emitでは、コールバック関数を追加して、それを小道具としてUserProfile.js：

に渡します

const emit = () => {
  props.callback({ name, email, age, password });
};

ここで、フォームの送信は親コンポーネントを更新し、提出されたデータを表示します。 emit

<button onclick="{emit}">Submit</button>

App.js UserProfileこれにより、チュートリアルが完成します。 制御されたコンポーネントを作成し、イベントを処理し、Reactでイベントを発する方法を学びました。プレースホルダーの画像パスを実際の画像パスに置き換えることを忘れないでください。

以上が反応のフォームとイベントを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。