5주차 - 버튼 앱 비활성화

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

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

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

버튼 앱 비활성화

이번 주에 우리는 비활성화 버튼 앱을 만들었습니다. 데이터가 변경되면 이를 처리하고 반응하는 버튼을 비활성화합니다.

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

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

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

입력 값은 상태 값입니다.

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

입력 값의 길이가 비어 있으면 제출 버튼이 비활성화됩니다.

이제 데이터가 변경되면 처리하고 버튼을 비활성화합니다.

암호

import React, {useState} from 'react';

const DisableButton = () => {
    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)}
            />
            <button disabled={value.length < 1}>
                Submit
            </button>
            <p>{value}</p>
        </div>
    );
}

export default DisableButton;

결론

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

Live Preview
Source Code