15.4.2フォームに入力したデータをサーバーに送ったうえで、ページに加えます。JSONデータをローカルサーバーから読み込んでページに表示する」で、AJAXで読み込んだデータのテキストをページの要素に差し込むことはできました。そこで書き上げたコード001「ローカルサーバーから読み込んだJSONデータをHTMLページに差し込む」に、さらに手を加えてゆきます。送信ボタンでフォームのデータを得るフォームのコンポーネント(CommentForm)に、つぎのようにテキスト入力フィールドふたつと送信ボタンを加えます(図001)。/></form>);}});図001■フォームにテキスト入力フィールドと送信ボタンが加わった送信するデータの扱いはReactで行いますので、以下のように<form>要素には、onSubmit属性でコンポーネント(CommentForm)のメソッド(handleSubmit())の呼び出しを定めました。メソッド本体の初めに、送信のデフォルトの動作をevent.preventDefault()メソッドで止めます。Reactのコンポーネントのやり取りで変更するデータは、stateプロパティに定めなければなりません。そこで、フォームのコンポーネント(CommentForm)に、getInitialState()メソッドでデータの初期値を定めました。すると、onSubmitハンドラのメソッド(handleSubmit())で、そのデータが取り出せます。その後データをサーバーに送る処理の代わりとして、console.log()メソッドでstateプロパティに与えられたデータを確認しています。'アイデアの秘訣は執念である。onSubmit={this.handleSubmit}></form>);}});これで、フォームの送信ボタンを押すと、getInitialState()メソッドでstateプロパティに定めたデータの初期値がコンソールに示されます(図002)。テキスト入力フィールドにはデータがテキストとして表れませんし、入力してもstateプロパティのデータは変わりません。フォームのデータをテキスト入力フィールドに表示するまず、stateプロパティに定めたデータの初期値を、テキスト入力フィールドに与えます。そのためには、stateプロパティのデータを、つぎのように<input>要素のvalue属性に定めればよいのです。これで、初期値のデータのテキストが、テキスト入力フィールドに示されます(図003)。その代わり、stateプロパティのデータを変えないかぎり、テキスト入力フィールドのテキストはそのまま変わらないことになります。テキスト入力フィールドでデータを編集するそこで、入力したテキストをstateプロパティのデータに反映させます。そのとき使うのがonChangeイベントハンドラです。Reactは基本的に標準のDOMの仕様にしたがっています。onChangeイベントハンドラは少し違っています。標準のonChangeイベントは、テキスト入力フィールドからフォーカスを外したときに生じます(「JavaScript:テキスト入力関連のイベント、onChange,onInput,onKeyUp」参照)。ReacrのonChangeイベントは値が変わるたびに起こりますので、標準のonInputイベントに準じます。つぎのように<input>要素にonChange属性を定め、イベントハンドラの関数本体から呼び出すsetState()メソッドに編集後の値を渡せば、テキスト入力フィールドの文字は入力に応じて変わり、送信ボタンで新たなデータがコンソールに示されます(図004)。/></form>);}});図004■テキスト入力フィールドで編集して送信ボタンを押すと編集後のデータが示されるテキスト入力フィールドを使ってstateプロパティのデータが変えられるようになりましたので、つぎのようにgetInitialState()メソッドの初期値は空にしましょう。送信のメソッド(handleSubmit())も新たなstateプロパティのデータを確かめたら、テキスト入力フィールドは空欄に戻します。ここまでの書き替えを、以下のコード001にまとめました。フォームに入力されたデータをサーバーに送るいよいよ、フォームに入力されたデータを、送信ボタンでサーバーに送る準備にかかります。stateプロパティをもつのは親コンポーネント(CommentBox)です。したがって、送信のメソッド(handleCommentSubmit())はつぎのように親コンポーネントに定め、フォームのコンポーネント(CommentForm)の送信ボタンが押されたとき新たなデータを引数にして呼び出すことにします。onSubmit={this.handleSubmit}></form>);}});送信のメソッド(handleCommentSubmit())は、つぎのようにjQuery.ajax()メソッドでデータをサーバーに送ります。引数のオブジェクトに定めたプロパティは、初期設定のメソッド(componentDidMount())で用いたものも含めて、以下の表001にまとめました(「$.ajax()」参照)。これで、フォームに入力したデータが送信ボタンでサーバーに送られ、ページに加えられるようになります(図005)。リクエストの送り先URLを示す文字列。サーバーから返されるデータのタイプを示す文字列。falseを与えると、リクエストされたページをブラウザにキャッシュさせない。デフォルト値はtrue。データを受け渡すメソッドで、GET(デフォルト値)またはPOST。サーバーに送るデータとなるオブジェクトまたは文字列あるいは配列。オブジェクトにはキー(プロパティ)とその値を納める。リクエストが成功したときに呼び出す関数。第1引数にはdataTypeにもとづいてフォーマットされたデータが渡される。リクエストが失敗したときに呼び出す関数。第1引数にXMLHttpRequest(jqXHR)オブジェクト、第2引数にはエラーの種類を示す文字列、第3引数にHTTPステータスのテキスト部分が渡される。処理を仕上げる前項までの書き替えで、基本の動きはできました。細かく見るとまだ至らないところがあります。テキスト入力フィールドが空欄であっても、つぎのJSONファイルが示すように空のままデータを送ってしまうのです。"チャンスは__貯金__できない。"禁煙なんてたやすい。私は*何千回*もやった。"アイデアの秘訣は執念である。}]そこで、つぎのようにテキストの入力が空の場合にはデータを送らないようにします。空白スペースだけで通ってしまわないように、データのテキストに対してString.trim()メソッドを呼び出しました。text});},}もうひとつ、テキスト入力フィールドの<input>要素のonChange属性には、フィールドごとに異なるイベントハンドラのメソッドを与えました。入力欄によって処理が違うならそうすべきです。この作例でやっているのは、入力をstateプロパティのデータに反映させているだけです。あれば、同じメソッドをハンドラに定めた方がすっきりします。そこで、つぎのように<input>要素にvalue属性の値と同じid属性を加えます。onChangeハンドラには同じメソッド(handleChange())を新たに与えて、メソッドはid属性値により、設定するstateプロパティのデータを決めるようにしました。onSubmit={this.handleSubmit}><inputid="author"type="text"value={this.state.author}onChange={this.handleChange}/><inputid="text"type="text"value={this.state.text}onChange={this.handleChange}/></form>);}});これらの手直しも加えたのが、つぎのコード002です。フォームのテキスト入力フィールドに書き加えたデータをサーバーに送り、新たなデータがページに加わります。未記入あるいは空白スペースだけの入力欄があれば、データは送られません。ライブラリのバージョン更新にともなう修正。スクリプトを一部修正。末尾にReact入門シリーズのリンクを追加。