Reactガイドを読んでいくその11
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
フォーム
今回は何回かに分けます。
フォームをイメージするのに時間がかかってしまった...。
HTMLHTMLフォームが持つ状態があるためReactは他のDOMとは違う動作をする。
基本的にはHTMLが持つデフォルトのフォームの動きをするが、ユーザの入力などに対して入力データに直接アクセスするようなJavaScriptがあったほうが便利。
制御コンポーネントと呼ばれるテクニックでこれを実現可能にする。
制御されたコンポーネント
HTMLにおける 、
Reactではstateを唯一の情報源とすることで単独で入力データを保持し、直接アクセスするようにすることができる。Reactによって制御される入力フォームは「制御されたコンポーネント」と呼ぶ。
下はフォーム送信時に名前をログに残すような処理になる。
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; //ここ this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } // ここ handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: // ここ <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } }
今日はここまで。