React - Input 상태 관리하기

in REACT on React, React


//rcc, rcs import React, { Component } from ‘react’;

class PhoneForm extends Component { state = { name : ‘’, phone: ‘’, }

handleChange = (e) =>{ //e는 이벤트 객체
    this.setState({
        [e.target.name]: e.target.value //input이 event.target
    })
}

render() {
    return (
        <div>
            이것은 PhoneForm 이라네.
            <input 
            name="name"
            placeholder="기본값.이름" 
            onChange={this.handleChange} 
            value={this.state.name}
            />
            
            <input 
            name="phone"
            placeholder="전화번호" 
            onChange={this.handleChange}
            value={this.state.phone}
            />

            <div>
                {this.state.name}
                {this.state.phone}
            </div>
        </div>
    );
} }

export default PhoneForm;