Form

30628 ワード
React テキストリンク

n/a.ターゲット

  • Form
    • について

    9. Form

  • 反応器は泡について以下のように説明した.
    •   <form>
    <label>
      Name:
      <input type="text" name="name" />
    </label>
    <input type="submit" value="Submit" />
  </form>
  • このフォームはデフォルトのHTMLフォーム動作を実行し、ユーザーがフォームをコミットすると、フォームは新しいページにジャンプします.
  • Reactで同じ操作を実行する場合は、そのまま使用します.
  • しかし、多くの場合、JavaScript関数を使用してフォームのコミットを処理し、ユーザーがフォームに入力されたデータにアクセスできるようにするのは便利です.
  • の標準的なやり方は、「制御素子」と呼ばれる技術を用いることである.

    • 9-1. せいぎょようそ

  • 反応器では、変更可能な状態は、通常、素子の状態属性に保持され、setState()によって更新される.
  • は、要素制御フォームによって生成されたユーザ入力値に応答し、このとき戻り値によって制御される入力フォームユニットを制御要素(controled component)と呼ぶ.
    • 以下のコードはinput,textarea,selectなどの制御素子を用いて状態を更新する内容である. 
    export default function ControlledComponent() {
  const [name, setName] = useState("");
  const [essay, setEssay] = useState("");
  const [flavor, setFlavor] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  function handleEssayChange(event) {
    setEssay(event.target.value);
  }

  function handleFlavorChange(event) {
    setFlavor(event.target.value);
  }

  function handleSubmit(event) {
    alert(`name: ${name}, essay: ${essay}, flavor: ${flavor}`);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          <input name="name" type="text" value={name} onChange={handleChange} />
        </label>
      </div>
      <div>
        <label>
          Essay:
          <textarea name="essay" value={essay} onChange={handleChange} />
        </label>
      </div>
      <div>
        <label>
          Pick your favorite flavor:
          <select name="flavor" value={flavor} onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
      </div>
      <input type="submit" value="Submit" />
    </form>
  );
}
  • 反応器は制御素子に言った.
  • が制御要素として使用される場合、入力された値は常に応答状態によって決定される.
    • これは、より多くの
  • コードを記述する必要があることを意味しますが、入力した値を他のUI領域に渡すか、他のイベントハンドラで値をリセットすることができます.

    • 9-1-1. 制御素子は何ですか?

  • 一言で、input、textarea、selectなどの値を状態管理できる素子を指す.

    • 9-2-1. 複数入力の制御

  • の複数の入力セグメントを制御する必要がある場合、各セグメントにnameorツリー図を追加し、event.target.nameの値でHandlerが何をするかを選択できます.
    • function handleChange(event) {
    setName(event.target.value);
  }

function handleEssayChange(event) {
  setEssay(event.target.value);
}

function handleFlavorChange(event) {
  setFlavor(event.target.value);
}

<input name="name" type="text" value={name} onChange={handleChange} />
<textarea name="essay" value={essay} onChange={handleChange} />
<select name="flavor" value={flavor} onChange={handleChange}>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>
  • コードの一部では、input、textarea、select elementのnameに値が設定され、event.target.nameで複数の入力を一度に制御できます.
    • function handleChange(event) {
  const name = event.target.name;
  if (name === "name") {
    setName(event.target.value);
  }

  if (name === "essay") {
    setEssay(event.target.value);
  }

  if (name === "flavor") {
    setFlavor(event.target.value);
  }
}

    9-2. ひせいぎょそし

  • 反応器では、以下の操作を行うことが望ましい.
    • ほとんどの場合、フォームを実装するには、制御構成部品を使用することを推奨します.ドライバ構成部品では、フォームデータはReact構成部品で処理されます.非制御要素(
  • 代替品)は、DOM自身によってフォームデータを処理する.
  • であるが、非制御素子(非制御素子)を用いる必要がある場合もある.
    • export default function UncontrolledComponent() {
  const fileInput = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Selected file - ${fileInput.current.files[0].name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload file:
        <input type="file" ref={fileInput} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}
  • 反応器において、typeがfileの素子は典型的な非制御素子であり、これは、設定値をプログラミングできず、ユーザのみが値を設定できるためである.
  • 非制御要素は、refを使用してDOMからフォーム値を取得することができる.

    • 9-2-1. 非制御素子は何ですか?

  • は一言で言えば泡を利用して自身の内部状態を装飾する素子である.

    • ソース

  • form(React)
  • uncontrolled-components(react)
    • JAva学習のimplemetnsルーチン
    Demo2.アナログ単純登録契約クラス