4주 - 입력 앱 처리

React Curve 4주차에 오신 것을 환영합니다.

개발자님 안녕하세요! 다시 만나 반갑습니다.

이것은 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다.

입력 앱 처리

이번 주에 우리는 반응에서 값이 변경될 때 입력 데이터를 처리하는 입력 처리 앱을 만들었습니다.

HandleInput 구성 요소를 만들려면 우리는 다음을 수행해야 합니다.

입력 데이터는 일반적으로 구성 요소에서 처리합니다. 따라서 모든 데이터는 구성 요소 상태에 저장됩니다.

초기 값이 빈 문자열인 입력 값을 보유하는 상태를 만듭니다.

입력 값이 상태 값입니다.

onChange 속성에 이벤트 핸들러를 추가하여 입력 변경을 제어하고 상태를 업데이트합니다.

이제 값이 변경될 때 데이터를 처리했습니다

.

암호

import React, {useState} from 'react';

const HandleInput = () => {
    const [value, setValue] = useState("");

    return (
        <div>
            <h2>Handle Input</h2>
            <input
                type="text"
                placeholder="Enter Your Title"
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <p>{value}</p>
        </div>
    );
}

export default HandleInput;

결론

읽어 주셔서 감사합니다. 아래 스레드에서 어떤 기여도 환영합니다!

Live Preview
Source Code