React input처리(사용자 입력 받기)

 

주요 코드

import React from 'react';

class Login1 extends React.Component {
    state = {
      id: '',
      password: ''
    }
    onChangeText = (evt:any) => {
      //alert("n:" + evt.target.name + ", v:" + evt.target.value + " id:" + this.state.id);
      this.setState({
        //id: evt.target.value
        //alert("n:" + evt.target.name);
        [evt.target.name] : evt.target.value
      });
    }
    onClickBtn = () => {
      alert("id:"+this.state.id+`, password:${this.state.password}`);
    }
    onPressKey = (evt:any) => {
      if (evt.key === 'Enter') {
        this.onClickBtn();
      }
    }
    render() {
      const { id, password } = this.state;
      const { onChangeText, onPressKey, onClickBtn } = this;
      return (
        <div className="App">
          <header className="App-header">
            <input type="text" name="id" placeholder="ID" value={this.state.id} onChange={onChangeText}/>
            <input type="password" name="password" placeholder="PASSWORD" value={password} onChange={onChangeText} onKeyPress={onPressKey}/>
            <button onClick={onClickBtn}>LOGIN</button>
          </header>
        </div>
      );
    }
  }

  export default Login1;

 

실행화면

typescript_exinput.7z

0.02MB

암호: infos