[js] 자바스크립트 버튼 클릭 후 disabled 처리 (ft. react, css)

button disabled

 

자바스크립트, 리액트를 이용해

button 클릭 후 disabled

처리 방법입니다.

 

 자바스크립트 버튼 클릭 후  disabled 처리

html

<button class='btn'>버튼</button>

 

javascript

let btn = document.querySelector('.btn')
btn.addEventListener('click', () => {
  btn.disabled = true
  btn.style.background = '#666'
  btn.style.color = '#fff'
})

 

화면보기 (result 클릭)

 

react에서 버튼 클릭 후 disabled 처리

import React from 'react'

const button = () => {
    const onDisabled = (e) => { //클릭시 버튼 disabled 처리
        e.preventDefault()
        e.currentTarget.disabled = true
        e.currentTarget.style.background = '#E5E5E5'
        e.currentTarget.style.color = '#4b5563'
    }

    return (
        <>
        	<button onClick={(e) => onDisabled(e) >버튼</button>
        </>
    );
};

export default button;