[React] React Basic - (4) Input 다루기

2020. 3.18

React Basic - (4) Input 다루기

Input 다루기

input의 파라미터인 onChange 메소드 : input 값이 변경되었을 때 호출된다.
e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재 텍스트 값을 읽어올 수 있다.

부모 컴포넌트에 정보 전달하기

전체 과정
1. 부모 컴포넌트 (App.js)에서 handleCreate 메소드를 만들고, 자식 컴포넌트 (PhoneForm.js)에 onCreate 파라미터로 handleCreate를 전달.
2. PhoneForm에서 form의 onSubmit 파라미터에 handleSubmit 메소드를 할당하여, submit 버튼이 클릭되면 this.props.onCreate(this.state)로 상태값을 부모 컴포넌트 (props)의 onCreate에 전달

e.preventDefault() 함수 : 페이지 리로딩 방지

원래 form 에서 submit이 발생하면, 페이지를 리로딩함.

하지만, 페이지가 리로딩되면 원래 있던 값을 잃어버리기 때문에 e.preventDefault()함수를 통해서 리로딩을 방지함.

App.js

import React, {Component} from 'react';
import PhoneForm from './PhoneForm';

class App extends Component {
  handleCreate = (data) => {
    console.log(data);
  }
  render() {
    return (
      // <Counter/>
      <div>
        <PhoneForm
          onCreate={this.handleCreate}/>
      </div>
    );
  }
}

export default App;

PhoneForm.js

import React, {Component} from 'react';

class PhoneForm extends Component {
    state = {
        name : '',
        phone : ''
    }
    // input의 onChange가 발생하면 호출되는 함수
    handleChange = (e) => {
        this.setState({
            // [e.target.name] : 이벤트가 발생한 input의 name
            [e.target.name] : e.target.value
        });
        // => 현재 input 상태를 이벤트 객체의 텍스트 값으로 변경
    }
    handleSubmit = (e) => {
        // 페이지 리로딩 방지
        e.preventDefault();
        // 상태값을 onCreate를 통하여 부모에게 전달
        this.props.onCreate(this.state);
        // 상태 초기화
        this.setState({
            name:'',
            phone:''
        });
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input 
                    placeholder="이름"
                    // submit을 클릭하면 초기화되도록 하기 위해 {this.state.name}객체 할당
                    value={this.state.name}
                    onChange={this.handleChange}
                    // input의 name으로 각 input을 구분함
                    name="name"
                />
                <input
                    placeholder="전화번호"
                    value={this.state.phone}
                    onChange={this.handleChange}
                    name="phone"
                />
                <button type="submit">등록</button>
            </form>
        );
    }
}
export default PhoneForm;