Reactフォーム

HTMLの場合と同様に、Reactはフォームを使用して、ユーザーがWebページを操作できるようにします。

Reactでのフォームの追加

他の要素と同じように、Reactを使用してフォームを追加します。

例：

ユーザーが自分の名前を入力できるフォームを追加します。

function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

これは通常どおり機能し、フォームが送信され、ページが更新されます。

しかし、これは一般的に、Reactで実現したいことではありません。

このデフォルトの動作を防ぎ、Reactにフォームを制御させたいと思います。

フォームの処理

フォームの処理とは、データが値を変更したり送信されたりしたときにデータを処理する方法です。

HTMLでは、フォームデータは通常DOMによって処理されます。

Reactでは、フォームデータは通常コンポーネントによって処理されます。

データがコンポーネントによって処理される場合、すべてのデータはコンポーネント状態で保存されます。

onChange属性にイベントハンドラーを追加することで、変更を制御できます。

フックを使用してuseState、各入力値を追跡し、アプリケーション全体の「信頼できる唯一の情報源」を提供できます。

フックの詳細については、「Reactフック」セクションを参照してください。

例：

onChangeフックを使用して入力を管理します。

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

認定を受けましょう！

Reactモジュールを完了し、演習を行い、試験を受けて、w3schools認定を取得してください!!

95ドル登録

フォームの送信

：のonSubmit属性にイベントハンドラーを追加することで、送信アクションを制御できます。<form>

例：

onSubmit属性に送信ボタンとイベントハンドラーを追加します。

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

複数の入力フィールド

name各要素に属性を追加することにより、複数の入力フィールドの値を制御できます。

空のオブジェクトで状態を初期化します。

イベントハンドラのフィールドにアクセスするには、 event.target.nameand event.target.value構文を使用します。

状態を更新するには、プロパティ名を角かっこ[角かっこ表記]で囲みます。

例：

2つの入力フィールドを持つフォームを作成します。

import { useState } from "react";
import ReactDOM from "react-dom";

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

注：両方の入力フィールドに同じイベントハンドラー関数を使用し、それぞれに1つのイベントハンドラーを記述できますが、これによりコードがはるかにクリーンになり、Reactで推奨される方法になります。

Textarea

Reactのtextarea要素は、通常のHTMLとは少し異なります。

<textarea> HTMLでは、textareaの値は、開始タグと終了タグの間のテキストでした </textarea>。

<textarea>
  Content of the textarea.
</textarea>

Reactでは、textareaの値がvalue属性に配置されます。フックを使用して、useStatetextareaの値を管理します。

例：

いくつかのコンテンツを含む単純なテキストエリア：

import { useState } from "react";
import ReactDOM from "react-dom";

function MyForm() {
  const [textarea, setTextarea] = useState(
    "The content of a textarea goes in the value attribute"
  );

  const handleChange = (event) => {
    setTextarea(event.target.value)
  }

  return (
    <form>
      <textarea value={textarea} onChange={handleChange} />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

選択する

Reactのドロップダウンリストまたは選択ボックスもHTMLとは少し異なります。

HTMLでは、ドロップダウンリストで選択された値は次のselected属性で定義されています。

HTML：

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

Reactでは、選択された値はタグのvalue 属性で定義されます。select

例：

選択した値「Volvo」がコンストラクターで初期化される単純な選択ボックス：

function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");

  const handleChange = (event) => {
    setMyCar(event.target.value)
  }

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}

とにこれらのわずかな変更を加えること<textarea>で<select>、Reactはすべての入力要素を同じ方法で処理できます。

❮ 前次 ❯

Reactチュートリアル

Reactフック

React演習