[React] JSON 형태로 입력 데이터 출력

[React] JSON 형태로 입력 데이터 출력

JSON형태로 입력된 값들을 출력하기 위해서는 key, value값을 setState하고 JSON.stringify로 변환해줘야한다.

아래 코드를 보면 3가지 age, name, address로 input이 가능하고, 

form submit으로 값을 담아 window.alert로 뿌려줄 수 있다.

 

여기서 주의해야될 점은 input에 name을 지정해주지 않으면 this.age와 같은 값이 key값을 제대로 찾지 못한다.

import React, {Component} from 'react'
 
export default class test extends Component {
    constructor(props){
        super(props)
        this.state = {
            age : '',
            name : '',
            address : ''
        }
    }
 
    render(){
 
        const doChange  = (e) =>{
            const CurValue = e.target.value
            const key = e.target.name
            this.setState({[key] : CurValue})
        }
 
        const doSubmit = (e) =>{
            window.alert(JSON.stringify(this.state))
        }
        return (
            <form onSubmit={doSubmit}>
                <input name = 'age' value = {this.age} onChange={doChange} /><br />
                <input name = 'name' value = {this.name} onChange={doChange} /><br />
                <input name = 'address' value = {this.address} onChange={doChange} /><br />
                <input type = 'submit' />
            </form>
        )
    }
}

출처 : 모던 자바스크립트 개발자를 위한 리액트 프로그래밍 노트 3장