React.js

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

녹녹1 2023. 4. 5. 11:12

 

 

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;