今回は、ダイアログを出して値を入力・決定ボタンを祖いた場合にstateを更新する
機能を作りました。
主な制約は以下の通り。
・inputとbuttonを同じダイアログに入れてすぐに値が変更できるようにする
・数値以外の値が入力された場合は決定ボタンを押してもダイアログが消えない
・正規表現を設けて数値以外の値を受け付けなくする
重量や個数を入力したい場合は何かの記号が入っていると送り先のapiで不整合な
値となって化けてしまうためこのような制約を設けました。
条件には値が空でないか・数値以外が入力されていないかの二つの制約を設ける
ことで誤入力を防ぎます。
正規表現を追加することでもっと細かくする(ある値以上の数値が入力された場合に決定ボタンを押せなくする)ことも
できます。
また、isCancelableをfalseに設定することでダイアログ外をタップしても
ダイアログが消えないようにしました。
これは、従来のダイアログだと、外をタップしてダイアログが終了する→不正な値が残ったまま
になってしまい不都合な情報をユーザーに見せてしまうためです。
このようにある程度縛りを加えることで自由度を下げて誤入力を未然に防ぎやすくすることができます。
他にいくつかフォームがある場合は、もっと本格的にバリデーションを加える必要がありますが
数値のみの場合はこれくらいの縛りでも問題なさそうです。
</pre>
<div></div>
<div>
<div>add(){</div>
<div> if(this.state.value && this.state.value.match(/^(\d{1,})$/)){</div>
<div> this.setState({isOutputDialogOpen: true});</div>
<div> }</div>
<div> }</div>
<div><Dialog</div>
<div> id="dialog"</div>
<div> modifier='material'</div>
<div> isOpen={this.state.isWeightDialogOpen}</div>
<div> isCancelable={false}></div>
<div> <p>値を入力してください</p></div>
<div> <Input type="number" modifier="material" value={this.state.value} onChange={(event) => { this.setState({value: event.target.value})}} />g</div>
<div> <div className="button-area"><Button className="submit" onClick={this.add} >決定</Button></div></div>
<div></Dialog></div>
<div></div>
<pre>
