6. Form

Forms

아래 코드는 실행하면 Input 필드에 값이 입력되지 않습니다. var Text = React.createClass({ getInitialState() { return { textValue: "initial value" }; }, render() { return (

{this.state.textValue}

); } });

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 입니다. 위에서 입력되지 않는 부분을 아래처럼 setState를 이용하여 입력값이 반영될 수 있게 수정한 코드입니다. var Text = React.createClass({ getInitialState() { return { textValue: "initial value" }; }, changeText(e) { this.setState({textValue: e.target.value}); }, render() { return (

{this.state.textValue}

); } });

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