処理[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イベントonChangeinputのテキスト値変更時に発生する海洋イベントです.e.target.value値により、inputから得られた現在のテキスト値を読み取ることができる.

e.preventDefault()元の活動を防ぐための作業.

this.props.onCreate(this.state)親に状態値を伝える

Reference

VELOPERT.LOG:誰でもできる反応6編