React 제어/비제어 구성요소-JS 튜토리얼-php.cn

React 제어/비제어 구성요소

WBOY

풀어 주다： 2024-09-03 22:42:32

원래의

832명이 탐색했습니다.

React Controlled/Uncontrolled Components

React에는 양식 입력을 처리하는 두 가지 주요 접근 방식이 있습니다.

제어 구성요소
통제되지 않는 구성 요소

제어되는 구성 요소는 더 많은 제어와 검증을 제공하는 반면, 제어되지 않는 구성 요소는 간헐적인 값 액세스의 기본 형태에 더 간단하고 유용합니다.

제어되는 구성 요소

React State에 의해 값이 제어되는 양식 입력입니다. 상태 변수는 입력 값이 변경될 때마다 업데이트되며 입력 값은 value prop을 통해 명시적으로 설정됩니다.

onChange 이벤트 핸들러는 상태를 업데이트하는 데 사용됩니다.

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          <input
               type="text"
               value={name}
               onChange={handleChange}
          />
     );
}

로그인 후 복사

위의 예에서 name 상태 변수는 입력 필드의 값을 제어합니다. handleChange 함수는 입력 값이 변경되고 입력 값이 value prop을 통해 name 상태 변수의 현재 값으로 설정될 때마다 이름 상태를 업데이트합니다.

제어되지 않는 구성 요소

제어되지 않는 구성 요소는 React State에 의해 제어되지 않고 내부적으로 상태를 관리하는 양식 입력입니다. 양식을 제출한 후 또는 필요할 때마다 ref를 사용하여 입력의 현재 값에 액세스할 수 있습니다.

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          <form onSubmit={handleSubmit}>
               <input
                    type="text"
                    ref={inputRef}
               />
               <button type="submit">Submit</button>
          </form>
     );
}

로그인 후 복사

위의 예에서 inputRef는 input 필드에 대한 ref를 생성하는 데 사용됩니다. handleSubmit 함수는 inputRef.current.value를 사용하여 입력의 현재 값에 액세스합니다. 필요에 따라 입력값을 활용하도록 양식 제출 로직을 구현할 수 있습니다.

위 내용은 React 제어/비제어 구성요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!