비밀번호 검증(배경색)- 클래스형 컴포넌트

 

 

css

.success {

  background-color: lightgreen;

}

.failure {

  background-color: lightcoral;

}

js

 

import React, { Component } from 'react';

import './VaildationSample.css';

export class VaildationSample extends Component {

  state = {

    password: '',

    clicked: false,

    vaildated: false,

  };

  handleChange = (e) => {

    this.setState({

      password: e.target.value,

    });

  };

  handleButtonClick = () => {

    this.setState({

      clicked: true,

      vaildated: this.state.password === '0000',

    });

  };

  render() {

    return (

      <div>

        <input

          type="password"

          value={this.state.password}

          onChange={this.handleChange}

          className={

            this.state.clicked

              ? this.state.vaildated

                ? 'success'

                : 'failure'

              : ''

          }

        ></input>

        <button onClick={this.handleButtonClick}>검증하기.........</button>

      </div>

    );

  }

}

export default VaildationSample;