React tutorial1-8

ラジオボタン

by catfood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="content"></div>
<script type="text/babel">
var AnswerRadioInput = React.createClass({
	propTypes: {
  	id      : React.PropTypes.string.isRequired,
  	name    : React.PropTypes.string.isRequired,
    label   : React.PropTypes.string.isRequired,
    value   : React.PropTypes.string.isRequired,
    checked : React.PropTypes.bool,
    onChanged : React.PropTypes.func.isRequired
	},
	getDefaultProps(){
   return {
   	id:null,
    checked:false
   }
  },
  getInitialState(){
  	return {
    	checked : !!this.props.checked,
      id : this.props.id ? this.props.id:"hogehoge",
    }
  },
  handleChanged(e){
  	var checked = e.target.checked;
    this.setState({checked:checked});
    if(checked){
    	this.props.onChanged(this.props.value)
    }
  },
	render(){
  	return (
    	<div className="radio">
	      <label htmlFor={this.state.id}>
        	<input type="radio"
          	name={this.props.name}
            id={this.state.id}
            value={this.props.value}
            checked={this.props.value==this.props.checked}
            onChange={this.handleChanged}/>
            {this.props.label}
  	    </label>
      </div>
    )
  }
});
var AnswerMultipleChoiseQuestion = React.createClass({
	propTypes : {
  	value:React.PropTypes.string,
    choices: React.PropTypes.array.isRequired,
    onCompleted : React.PropTypes.func
  },
  getInitialState(){
  	return {
    	id:"id",
      value:this.props.value
    }
  },
	getDefaultProps(){
   return {
    value:null
   }
  },
	handleChanged(value){
  console.log("handleChanged2",value)
  	this.setState({value:value});
  },
  renderChoices(){
  	return...