React 디자인 패턴~컨테이너 구성 요소 / 제어되지 않는 제어 구성 요소~

• 제어되지 않는 구성요소

이 패턴은 React가 양식 데이터를 제어하지 않고 DOM이 양식 상태를 보유한다는 것을 의미합니다.

DOM에 액세스할 때 useRef 후크를 사용하여 ref 속성을 설정해야 합니다.

・src/comComponents/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 중국어 웹사이트의 기타 관련 기사를 참조하세요!