ホームページ > 記事 > ウェブフロントエンド > React デザインパターン ~コンテナコンポーネント / 非制御コンポーネント~
このパターンは、React がフォーム データを制御せず、DOM がフォームの状態を保持することを意味します。
DOM にアクセスするときは、useRef フックを使用して ref 属性を設定する必要があります。
・src/components/uncontrolled-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> ); };
このパターンは、React が useState フックを使用してフォーム データを制御することを意味します。
入力値を完全に制御し、リアルタイムで更新できます。
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> ); };
以上がReact デザインパターン ~コンテナコンポーネント / 非制御コンポーネント~の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。