form

//Text
var InpTxt = React.createClass({
  getInitialState: function(){
    return {dispTxt: ''};
  },
  uqInput: function(e){
    this.setState({dispTxt: e.target.value});
    console.log(this.state.dispTxt);
  },
    render: function(){
        return (<div>Input Text: <input type='text' value={this.state.dispTxt} onChange={this.uqInput} placeholder='入力欄' /></div>);
    }
});
ReactDOM.render(
    <InpTxt />,
    document.getElementById('hoge1')
);

//Radio Button
var RadioBtn = React.createClass({
    getInitialState: function(){
        return {select: 'fst'};
    },
    uqRadio: function(e){
        console.log(e.target.value);
        this.setState({select: e.target.value});//'select'ステートにvalueを設定
    },
    render: function(){
        return (<div>一つ選びなさい : 
            <div>
                <input 
                    type='radio' 
                    value='fst' 
                    checked={this.state.select === 'fst'} //'select'ステートに設定されたvalueと等値であればtrue
                    onChange={this.uqRadio} 
                    />選択1
            </div>
            <div>
                <input 
                    type='radio' 
                    value='snd' 
                    checked={this.state.select === 'snd'} 
                    onChange={this.uqRadio} 
                    />選択2
            </div>
            <div>
                <input 
                    type='radio'  
                    value='trd' 
                    checked={this.state.select === 'trd'} 
                    onChange={this.uqRadio} 
                    />選択3
            </div>
        </div>);
    }
});
ReactDOM.render(
    <RadioBtn />,
    document.getElementById('hoge2')
);

//CheckBox
var CheckBox = React.createClass({
    getInitialState: function(){
        return {select: this.props.select};
        // return {select: ['fst']};// 初期値として'選択1'のみ配列に設定
    },
    uqCheckBox: function(e){
        var selectArr = this.state.select;// ステートを変数に代入
        var ind = selectArr.indexOf(e.target.value);// 選択されたチェックボックスがあった場合のindexを調べる
        if(e.target.checked){
            selectArr.push(e.target.value); //配列に値を挿入
        }else{
            selectArr.splice(ind, 1); //配列中の調べたindexにある値を削除
        }
        this.setState({select: selectArr});// 変数からステートに戻す
        console.log(this.state.select);
    },
    render: function(){
        return(<div>選びなさい(複数可)
            <div>
                <input
                    type='checkbox'
                    value='fst'
                    checked={this.state.select.indexOf('fst') !==-1}// ステートの配列に'fst'の有無を調べる
                    onChange={this.uqCheckBox}
                />選択1
            </div>
            <div>
                <input
                    type='checkbox'
                    value='snd'
                    checked={this.state.select.indexOf('snd') !==-1}
                    onChange={this.uqCheckBox}
                />選択2
            </div>
            <div>
                <input
                    type='checkbox'
                    value='trd'
                    checked={this.state.select.indexOf('trd') !==-1}
                    onChange={this.uqCheckBox}
                />選択3
            </div>
        </div>);
    }
});
ReactDOM.render(
    <CheckBox select={['fst', 'snd']} />,
    document.getElementById('hoge3')
);

//Select
var SelectSingle = React.createClass({
    getInitialState: function(){
        return {selected: this.props.selected};// ReactDOM内プロパティselectedの値を取得
    },
    uqSelect: function(e){
        console.log(e.target.value);
        this.setState({selected: e.target.value});//イベント対象の値をステートに設定
    },
    render: function(){
        return(<div>選びなさい:
            <select
                onChange={this.uqSelect}// onChange属性にメソッドを設定
                multiple={false}
                value={this.state.selected}>
                <option value="fst">選択1</option>
                <option value="snd">選択2</option>
                <option value="trd">選択3</option>
            </select>
        </div>);
    }
});
ReactDOM.render(
    <SelectSingle selected={'fst'} />,
    document.getElementById('hoge4')
);

//Select Plural
var SelectPlural = React.createClass({
    getInitialState: function(){
        return {selected: this.props.selected};// ReactDOM内プロパティselectedの値を取得
    },
    uqSelect: function(e){
        var selectedArr = this.state.selected;
        var ind = selectedArr.indexOf(e.target.value);
        if(ind === -1){
            selectedArr.push(e.target.value);
        } else {
            selectedArr.splice(ind, 1);
        }
        this.setState({selected: selectedArr});//イベント対象の値をステートに設定
        console.log(this.state.selected);
    },
    render: function(){
        return(<div>選びなさい(複数可):
            <select
                onChange={this.uqSelect}// onChange属性にメソッドを設定
                multiple={true}
                value={this.state.selected}
                size="2">
                <option value="fst">選択1</option>
                <option value="snd">選択2</option>
                <option value="trd">選択3</option>
            </select>
        </div>);
    }
});
ReactDOM.render(
    <SelectPlural selected={['fst','snd']} />,
    document.getElementById('hoge4')
);

//submit
var SubmitBtn = React.createClass({
    getInitialState: function(){
        return {selected: this.props.selected};
    },
    uqCheckBox: function(e){
        var selectedArr = this.state.selected
        var ind = selectedArr.indexOf(e.target.value);
        if(e.target.checked){
            selectedArr.push(e.target.value);
        }else{
            selectedArr.splice(ind, 1);
        }
        this.setState({selected: selectedArr});
    },
    uqSubmit: function(e){
        e.preventDefault();// JSのpreventDefault()を使用しブラウザ機能による送信処理をキャンセル
        if(this.state.selected.length < 2)// 配列の値が二つ未満の場合、returnでuqSubmitを終了させる
            return;
        console.log(this.state.selected);
        this.setState({selected: []});// SUBMIT後、配列を空にする
    },
    render: function(){
        return (<form onSubmit = {this.uqSubmit}>二つ以上選びなさい:
            <div>
                <input
                    type="checkbox"
                    value="fst"
                    checked={this.state.selected.indexOf('fst') !== -1}
                    onChange={this.uqCheckBox}
                />選択1
            </div>
            <div>
                <input
                    type="checkbox"
                    value="snd"
                    checked={this.state.selected.indexOf('snd') !== -1}
                    onChange={this.uqCheckBox}
                    />選択2
            </div>
            <div>
                <input
                    type="checkbox"
                    value="trd"
                    checked={this.state.selected.indexOf('trd') !== -1}
                    onChange={this.uqCheckBox}
                    />選択3
            </div>
            <input type="submit" value="SUBMIT"/*5*/ />
        </form>);
    }
});
ReactDOM.render(
    <SubmitBtn selected={[]}/>,
    document.getElementById('hoge5')
);

See the Pen React: form parts by nwstcode (@nwst) on CodePen.12804

tagTimeLog Lite

Simple time tracking tool
Developed by Namu Works