Heim  >  Artikel  >  Web-Frontend  >  Reagieren Sie auf Entwurfsmuster ~ Containerkomponenten / unkontrollierte kontrollierte Komponenten ~

Reagieren Sie auf Entwurfsmuster ~ Containerkomponenten / unkontrollierte kontrollierte Komponenten ~

Barbara Streisand
Barbara StreisandOriginal
2024-09-24 06:15:02672Durchsuche

React Design Patterns~Container Componets / Uncontrolled Controlled Component~

  • Unkontrollierte Komponente

Dieses Muster bedeutet, dass React die Formulardaten nicht kontrolliert und das DOM den Formularstatus speichert.

Wenn Sie auf das DOM zugreifen, müssen Sie das ref-Attribut mithilfe des useRef-Hooks festlegen.

・src/components/untained-form.jsx

import React from "react";

export const UncontrolledForm = () => {
  const nameInputRef = React.createRef();
  const ageInputRef = React.createRef();

  console.log("renedering");

  const SubmitForm = (e) => {
    console.log(nameInputRef.current.value);
    console.log(ageInputRef.current.value);

    e.preventDefault();
  };

  return (
    <form onSubmit={SubmitForm}>
      <input name="name" type="text" placeholder="Name" ref={nameInputRef} />
      <input name="age" type="number" placeholder="Age" ref={ageInputRef} />
      <input type="submit" value="Submit" />
    </form>
  );
};
  • Gesteuerte Komponente

Dieses Muster bedeutet, dass React die Formulardaten mithilfe des useState-Hooks steuert.

Wir können den Eingabewert vollständig kontrollieren und in Echtzeit aktualisieren.

import React, { useEffect, useState } from "react";

export const ControlledForm = () => {
  const [errorMessage, setErrorMessage] = useState("");
  const [name, setName] = useState("");
  const [age, setAge] = useState();

  useEffect(() => {
    if (name.length < 1) {
      setErrorMessage("name can not be empty");
    } else {
      setErrorMessage("");
    }
  }, [name]);

  return (
    <form>
      {errorMessage&& <p>{errorMessage}</p>}
      <input
        type="text"
        name="name"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        name="age"
        placeholder="Age"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
      <button>Submit</button>
    </form>
  );
};

Das obige ist der detaillierte Inhalt vonReagieren Sie auf Entwurfsmuster ~ Containerkomponenten / unkontrollierte kontrollierte Komponenten ~. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn