React Form 만들기 & 코드블록 Test

최대 1 분 소요

리액트로 만들어본 최초의 Form

코드블럭으로 이쁘게 보이는지 Test

import React, { Component } from 'react';

class MyForm extends Component {
  state = {
    name: '',
    addr: ''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.onCreate(this.state);
    this.setState({
      name: '',
      addr: ''
    })
  }  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          placeholder="이름"
          value={this.state.name}
          onChange={this.handleChange}
          name="name"          
        />
        <input
          placeholder="주소"
          value={this.state.addr}
          onChange={this.handleChange}
          name="addr"
        />        
        <button type="submit">등록</button>
      </form>
    );
  }
}

export default MyForm;

태그:

업데이트: