7. React에서 폼 다루기
input, textarea, option 같은 다른 폼 요소를 통한 입력 처리 방법
7.1 React에서 폼을 다루기 위한 권장 방법
ex) React에서 폼 다루기
handleChange(event) {
this.setState({title: event.target.value})
}
render() {
return <input type="text" name="title" value={this.state.title} onChange={this.handleChange.bind(this)}/>
}단방향 바인딩 이라고 한다. ; 상태가 뷰를 갱신하는 것이 전부이기 때문
7.1.1 React에서 폼과 이벤트 정의하기
- onChange : 폼의 입력 요소에 변경이 생기면 발생
- onInput :
요소의 값이 변경될 때 발생. (비추천) - onSubmit : 폼 제출 시 발생.
ex) enter키로 폼 전송하기
handleKeyUp(event) {
if (event.keyCode == 13) return this.sendData()
}
render() {
return <form onKeyUp={this.handleKeyUp}>
...
</form>
}7.2 폼을 다루는 다른 방법
7.2.1 비제어 엘리먼트에서 변경 감지하기
ex) 변경을 감지하는 비제어 엘리먼트
class Content extends React.Component {
constructor(props) {
super(props)
this.state = {textbook: ''}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
console.log(event.target.value)
this.setState({textbook: event.target.value})
}
render() {
return <div>
<input
type+'text"
onChange={this.handleChange}
placeholder="Eloquent TypeScript: Myth or Reality" />
<br/>
<span>{this.state.textbook}</span>
</div>
}
}7.2.2 비제어 엘리먼트에서 이벤트 감지하지 않는 경우
7.2.3 값에 참조로 접근하기
비제어 컴포넌트를 다룰 때는 onChange 같은 이벤트를 이용해 입력을 감지하지 않으므로 refs를 통해 참조로 값에 접근한다.
참조를 사용하면 React 컴포넌트의 DOM 요소 또는 노드를 가져올 수 있다.
변경을 감지하지 않고 폼 요소읙 ㅏㅄ을 가져와야 할 때 유용하다.
ex) 이메일 폼 만들어 보기
class Content extends React.Component {
constructor(props) {
super(props)
this.submit = this.submit.bind(this)
this.prompt = 'Please enter your email to win'
}
submit(event) {
let emailAddress = this.refs.emailAddress
let comments = this.refs.comments
let fd = ReactDOM.findDOMNode
console.log(fd(emailAddress).value)
console.log(fd(comments).value)
}
render() {
return (
<div calssName="well">
<p>{this.prompt}</p>
<div className="form-group">
Email: <input ref="emailAddress" className="form-control" type="text" placeholder = "ysg01129@naver.com" />
</div>
<div className="form-group">
Comments: <textarea ref="comments" className="form-control" placeholder = "I like Android!!!"/>
</div>
<div className="form-group">
<a className="btn btn-primary" value="Submit" onClick={this.submit}>Submit</a>
</div>
</div>
)
}
}7.2.4 기본값 설정하기
defaultValue
요약
- 폼을 다루는 방법 중 권장하는 방법은 변경을 감지하여 이벤트 리스너로 상태에 데이터를 저장하는 제어 컴포넌트를 사용하는 것이다.
- 변경을 감지하거나 감지하지 않는 비제어 컴포넌트를 사용하는 방법은 좋은 방법이 아니므로 피한느 것이 좋다.
- 참조와 기본갑승ㄴ 모든 경우 사용할 수 있지만, 제어 컴포넌트의 경우에는 사용할 필요가 없다.
- React의