6. Form

Forms

React 에서의 Form은 HTML의 Form과 비슷합니다. 하지만, 아래 코드는 실행하면 Input 필드에 값이 입력되지 않습니다.

var Text = React.createClass({
  getInitialState() {
    return {
      textValue: "initial value"
    };
  },
  render() {
    return (
      <div>
	<p>{this.state.textValue}</p>
	<input type="text" value={this.state.textValue} />
      </div>
    );
  }
});

ReactDOM.render(
  <Text />,
  document.getElementById('root')
);

This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".

Controlled Components

Controlled Component는 State에 따라 값을 관리하는 Componenet 입니다.(single source of truth) 위에서 입력되지 않는 부분을 아래처럼 setState를 이용하여 입력값이 반영될 수 있게 수정한 코드입니다.

var Text = React.createClass({
  getInitialState() {
    return {
      textValue: "initial value"
    };
  },
  changeText(e) {
    this.setState({textValue: e.target.value});
  },
  render() {
    return (
      <div>
	<p>{this.state.textValue}</p>
	<input type="text" value={this.state.textValue} onChange={this.changeText} />
      </div>
    );
  }
});

ReactDOM.render(
  <Text />,
  document.getElementById('root')
);

value를 State로 관리하고, onChange()에서 setState()하여 명시적으로 값을 갱신하고 전달합니다.

UnControlled Component

UnControlled Componenent는 반대로 값을 관리하지 않는 컴포넌트로 초기값을 설정한 값은 defaultValue로 지정합니다. 이 경우는 앞 절에서처럼 onChange()에서 항상 값을 state에 반영해도 되고, 반영하고 싶을 때만 DOM에서 value를 취득하여 갱신하는 것도 가능합니다.

var LiveText = React.createClass({
  getInitialState() {
    return {
      textValue: "initial value"
    };
  },
  changeText(e) {
    this.setState({textValue: this.refs.inputText.getDOMNode().value });
  },
  render() {
    return (
      <div>
	<p>{this.state.textValue}</p>
	<input type="text" ref="inputText" defalutValue="initial value" />
	<button onClick={this.changeText}>change</button>
      </div>
    );
  }
});

ReactDOM.render(
  <LiveText />,
  document.getElementById('root')
);