Heim > Artikel > Web-Frontend > Reagieren Sie auf Entwurfsmuster ~ Containerkomponenten / unkontrollierte kontrollierte Komponenten ~
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> ); };
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!