Reactに挑戦してみる 10

概要

Reactに挑戦してみる10。フォームのバリデーションとかをやる。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

フォームのサブミットとバリデーション(formタグとonSubmit属性）

var FormSubmit = React.createClass({
# State selectionの初期化。ここでは、propsのselectionの値をセットする。
    getInitialState: function(){
        return {selection: this.props.selection};
    },
# onChangeで呼び出されるメソッドをセットする。
    handleChange: function(event){
        var selection = this.state.selection
        var position = selection.indexOf(event.target.value);
        if (event.target.checked){
            selection.push(event.target.value);
        }else{
            selection.splice(position, 1);
        }
        this.setState({selection: selection});
        console.log(this.state.dispText);
    },
# onSubmitで呼び出されるメソッドを設定する。
    handleSubmit: function(event){
# onSubmitのイベントがブラウザによって処理されないようにするとのこと。
        event.preventDefault();
# チェックされている数を数えて、２未満の場合は、何も返さない設定。
        if (this.state.selection.length < 2)
            return;
        console.log('Submitting: ', this.state.selection);
        this.setState({selection: []});
    },
    render: function(){
        return (<form onSubmit={this.handleSubmit}>
            ２つ以上を選んでください：
        <div>
            <input
                type="checkbox"
                value="first"
                checked={this.state.selection.indexOf('first') !== -1}
                onChange={this.handleChange}
            />最初の選択肢
        </div>
        <div>
            <input
                type="checkbox"
                value="second"
                checked={this.state.selection.indexOf('second') !== -1}
                onChange={this.handleChange}
            />次の選択肢
        </div>
        <div>
            <input
                type="checkbox"
                value="third"
                checked={this.state.selection.indexOf('third') !== -1}
                onChange={this.handleChange}
            />最後の選択肢
        </div>
        <input type="submit" value="決定" />
        </form>);
    }
});

ReactDOM.render(
    <FormSubmit selection={[]} />,
    document.getElementById('content')
);

複雑だなぁ〜まあでもこの辺は、djangoとかのvalidationでやってしまうからいいか。