[React] Input 다루기

import React, { Component } from 'react';

class Form extends Component{
  state = {
  name:'',
  phone: ''
}
handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  })
}
handleSubmit = (e) => {
  e.preventDefault();
  this.props.onCreate(this.state) // 부모에게 전달
render(){
  return (
    <form>
    	<input
    	 placeholder="이름"
    	 value={this.state.name}
	 onChange={this.handleChange}
	/>
    </form>
)}
}

export default Form;

1. onChange 이벤트

onChange는 input의 텍스트값이 바뀔때바다 발생하는 이벤트이다.
e.target.value 값을 통해 input에서 받은 현재 텍스트 값을 읽어올 수 있다.

• e.preventDefault() 원래 이벤트가 해야하는 작업을 방지한다.
• this.props.onCreate(this.state) 부모에게 상태값 전달 (props)

Reference

• VELOPERT.LOG: 누구든지 하는 리액트 6편