//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.
