ValidationSample.js

    import React, { Component } from 'react';
    import './ValidationSample.css';
     
    class ValidationSample extends Component {
      state = {
        password: '',
        clicked: false,
        validated: false
      }
     
      handleChange = (e) => {
        this.setState({
          password: e.target.value
        });
      }
     
      handleButtonClick => () => {
        this.setState({
          clicked: true,
          validated: this.state.password === '0000'
        })
      }
     
      render() {
        return (
          <div>
            <input
              type="password"
              value={this.state.password}
              onChange={this.handleChange}
              className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
            />
            <button onClick={this.handleButtonClick}>검증하기</button>
          </div>
        );
      }
    }
     
    export default ValidationSample;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.