[ReactJs] 리엑트 폼 요소 정의

리엑트 폼 요소 정의

1. 리엑트의 폼 속성

- 일반적으로 리엑트는 속성을 변경할 수 없다. 그러나 폼 요소의 속성은 변경이 가능하다.

- value, checked, selected 라는 대화형 속성을 두어서 폼 요소를 특별하게 다루고 있다

- value : <input>, <textarea>, <select>

- checked: <input> 의 type="checked" 또는 type="radio"

- selected: <select>의 <option>

2. <input> 요소

1) type="text"

- value를 변경가능 속성으로 한다

- 일반적인 텍스트 영역이다.

- onChange 이벤트 핸들러를 사용한다.

<input type="text" name="email" value={this.state.email} onChange={this.handleEmailChange}/>

2) type="checkbox", type="radio" 

- checked 혹은 selected를 변경 가능 속성으로 한다.

- value 속성은 하드코딩을 한다

A. radio 사용하기

import React from 'react'; import ReactDOM from 'react-dom'; class Content extends React.Component{ constructor(props){ super(props) this.handleRadio = this.handleRadio.bind(this) this.state = { radioGroup :{ angular: false, react:true, polymer:false } } } handleRadio(event){ let obj = {} obj[event.target.value] = event.target.checked this.setState({radioGroup:obj}) } render(){ return <form> <input type="radio" name="radioGroup" value='angular' checked={this.state.radioGroup['angular']} onChange={this.handleRadio}/> angular <input type="radio" name="radioGroup" value='react' checked={this.state.radioGroup['react']} onChange={this.handleRadio}/> react <input type="radio" name="radioGroup" value='polymer' checked={this.state.radioGroup['polymer']} onChange={this.handleRadio}/> polymer </form> } } ReactDOM.render( <Content/>, document.getElementById('app') );  

- 객체를 교체하는 방법을 이용하여 radio의 checked 를 할당한다

B. checkbox 사용하기

import React from 'react'; import ReactDOM from 'react-dom'; class Content extends React.Component{ constructor(props){ super(props) this.handleCheckBox = this.handleCheckBox.bind(this) this.state = { checkboxGroup:{ node:false, react:true, express:false, mongodb:false } } } handleCheckBox(event){ let obj = Object.assign(this.state.checkboxGroup) obj[event.target.value] = event.target.checked this.setState({checkboxGroup:obj}) } render(){ return <form> <input type="checkbox" name="checkboxGroup" value='node' checked={this.state.checkboxGroup['node']} onChange={this.handleCheckBox}/> node <input type="checkbox" name="checkboxGroup" value='react' checked={this.state.checkboxGroup['react']} onChange={this.handleCheckBox}/> react <input type="checkbox" name="checkboxGroup" value='express' checked={this.state.checkboxGroup['express']} onChange={this.handleCheckBox}/> express <input type="checkbox" name="checkboxGroup" value='mongodb' checked={this.state.checkboxGroup['mongodb']} onChange={this.handleCheckBox}/> mongodb </form> } } ReactDOM.render( <Content/>, document.getElementById('app') );  

- assign()를 이용하여 객체의 병합을 통해서 checked를 할당한다