[ReactJs] 리액트 폼 이벤트 설정

리액트 폼 이벤트 설정

0. 제어컴포넌트와 비제어 컴포넌트

- 제어컴포넌트 : 컴포넌트 내부 상태와 뷰를 항상 동기화 시키는 방식, React가 값을 통제하거나 설정한다. (value 속성존재)

- 비 제어컴포넌트: 간단한 폼을 작성한다면 비 제어 컴포넌트를 추천한다. 제어와 다르게 값을 react가 통제하지 않는다

1. 제어 컴포넌트 

1) 기본사용

- react 에서는 기본적으로 단방향 바인딩을 이용하여 간결함을 유지한다

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

class Form extends React.Component{     constructor(props){         super(props)         this.state = {title:'aaa'}     }     handleChange(event){         this.setState({title: event.target.value})     }     render(){         return <div>                 <input type='text' name="title" value={this.state.title} onChange={this.handleChange.bind(this)}/>{this.state.title}         </div>     } } ReactDOM.render(     <Form/>,     document.getElementById('app') )

- onChange() 를 이용하여 데이터로 상태를 관리한다.

2) 예제

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import React from 'react'; import ReactDOM from 'react-dom';    class Content extends React.Component{     constructor(props){         super(props)         this.handleChange = this.handleChange.bind(this)         this.state = {             accountNumber :''         }     }     handleChange(event){         console.log('typed:',event.target.value)         this.setState({accountNumber:event.target.value.replace(/[^0-9]/ig, '')})     }     render(){         return <div>             Account:             <input type="text" onChange={this.handleChange}             placeholder="123445" value={this.state.accountNumber}/>             <br/>             <span>{this.state.accountNumber.length > 0 ? 'you entered:'+this.state.accountNumber: ''}</span>             </div>     }   }    ReactDOM.render(   <Content/>,   document.getElementById('app') );