React Input disabled handl

January 09, 2022

Disabled 설정 on/off 하기

인풋 박스를 사용하다 보면 조건부로 disabled처리를 하고 싶을 때가 있다. 그럴 땐 useState를 통해 관리하면 된다.

source code

import React, { useState } from "react"

const Input = () => {
  const [flip, setFlip] = useState(false)

  const flipHandler = () => {
    setFlip(current => !current)
  }

  return (
    <div>
      <h1>Input Boxs</h1>
      <div>
        <label>Email</label>
        <input type="string" id="email" placeholder="email" disabled={flip} />
      </div>
      <div></div>

      <label>Password</label>
      <input
        type="password"
        id="password"
        placeholder="password"
        disabled={!flip}
      />
      <br />
      <button onClick={flipHandler}>Change disabled</button>
    </div>
  )
}

export default Input

Profile picture

Written by Sungsu
Learn and recodes any things.