前回からの続きです。 今回読むReact公式ドキュメントは「フォーム」ページの最後です。
フォーム解説の最後となる今回は、Reactで複数のinput要素を制御する場合の実例を示します。また、Reactのフォームを直感的に作成するライブラリ「Formik」を紹介します。
Reactで複数のinput要素を扱う
Reactにおいて複数のinput要素を扱う場合、それぞれのinput要素にname属性を指定して識別します。
// Reservationコンポーネント
class Reservation extends React.Component {
// コンストラクタ
constructor(props) {
super(props);
// stateを初期設定
this.state = {
isGoing: true,
numberOfGuests: 2
};
// メソッドをバインド
this.handleInputChange = this.handleInputChange.bind(this);
}
// クラスメソッド
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
// 渡された入力名に対応する state の値を更新
this.setState({
[name]: value
});
}
// レンダリング要素を返す(input要素が2つ)
render() {
return (
<form>
<label>
滞在中:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
人数:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
// レンダリング
ReactDOM.render(
<Reservation />,
document.getElementById('root')
);
上記のサンプルソースをHTMLファイルにしたものが以下です。
https://programming-world.net/sample/react_doc/forms4-1.html
上記コードのフォームには、input要素が2つあります。それぞれのinput要素のname属性には、isGoingとnumberOfGuestsが指定されています。isGoingとnumberOfGuestsは state として管理されており、ユーザー操作に合わせて state が更新されるようになっています。
具体的には、ユーザーがチェックボックスを付けたり外した際、あるいは、人数を増減させた際に、input要素を変化させるとクラスメソッドのhandleInputChange()が呼び出され、そのなかのsetState()が実行されることでstateが更新されます。
setState() は、stateに含まれる一部の変数を更新した場合にも、自動的に現在のstateと統合するので、ユーザーによる変更のあった変数だけを呼び出せば大丈夫です。
尚、 setState() のなかにある[name]の部分は、ECMAScript 2015から使えるようになったプロパティ名を計算値で記述する形式です。式を角カッコ[ ]に入れて指定することでプロパティ名として使用できます。
React向けフォーム作成用ライブラリ「Formik」
Reactで本格的なフォームを設置する必要がある場合、input要素・textare要素・select要素などで作成する入力項目の挙動をひとつひとつ制御するのは大変です。
そのような場合の解決策のひとつが、「Formik」です。FormikはReact向けフォーム作成用ライブラリです。Formik を使うと、Reactのフォームを直感的に作成することができるようになります。例えば、入力値のバリデーションや訪問済みフィールドの追跡などの高度な機能を直感的に実現できます。
FormikはReactのフォーム作成を簡単にしますが、 Formikの内部はReactのコンポーネントやstate管理と同じ仕組みを使って作成されています。Formikを使うとしても、Reactのコンポーネントやstate管理の仕組みは理解しておきたいところです。
Formik公式サイト:https://jaredpalmer.com/formik
次回へ続きます。