210821_작성 완료 시에만 입력 버튼 활성화

Bitnara Lee·2021년 8월 21일
0

const isInvalid = password === '' || emailAddress === '';

   <button
      disabled={isInvalid}
      type="submit"
      className={`bg-blue-medium text-white w-full rounded h-8 font-bold
    ${isInvalid && 'opacity-50'}`}
    >
      Sign Up
    </button>

isInvalid를 설정하고
렌더링시 className에 && 문법으로 넣어준다.

모두 입력

-> isInvalid === true
-> opacity-50 활성화 (버튼 투명도 50)
-> disabled = true 사용 x


하나라도 입력x

-> isInvalid === false
-> isInvalid 활성화 (className에 boolean값은 보이지 x), 버튼 투명도는 일반 100
-> disabled = false가 되어 사용 가능

profile
Creative Developer

0개의 댓글