最近在一本react书上看到一个多项选择题的react组件，做了一些改动。实现一个多项选择题的组件很简单，但是这里主要讲了它的实现思路。以下是实现效果：
一个渲染选择题的组件要满足一下几个条件：
1.接受一组选项作为输入。
2.把选项渲染给用户。
3.只允许用户选择一个选项。
HTML提供了input（radio）单选输入框。
组件的层级从上往下看是这样的：
MultipleChoice(多个选择项的选择题) ->RadioInput（一个选项） -> Input(type="radio")
选择题组件MultipleChoice应该由一个个基本的选项组成（RadioInput），一个选项应该有一个输入单选框input构成。
组装HTML
首先将input(type="radio")组装到AnswerRadioInput这个组件中，
var AnswerRadioInput = React.createClass({
render: function(){
return (
<div className="checks">
<label htmlFor={this.state.id}><input type="radio" />Label text</label>
</div>
);
}
});
添加动态属性
1.需要添加value和name值，表示传递的值；
2.文本，这个选项是什么内容
3.可能需要id
如此，可以把这些添加到PropTypes对象当中：
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,
onChange:React.PropTypes.func.isRequired
}
数据传入
getInitialState: function(){
var id = this.props.id;
return {
checked: false,
id: id,
name:id
};
},
handleChanged: function(e){
var checked = e.target.checked;
//to do what;
},
render: function(){
return (
<div className="checks">
<label htmlFor={this.state.id}>
<input type="radio"
name={this.props.name}
id={this.props.id}
value={this.props.value}
onChange={this.handleChanged}
/>{this.props.label}</label>
</div>
);
}
整合到父组件当中
现在可以把这个组件整合到AnswerMultipleChoiceQuestion父组件中，这一层主要是渲染一列选项让用户从中选择。
1.需要传入给这个单选题传入name值
2.需要传入给这个单选题传入问题内容
2.需要传入每个选项label内容
3.需要传入每个选项的value值
var AnswerMultipleChoiceQuestion = React.createClass({
propTypes: {
value: React.PropTypes.string,
choices: React.PropTypes.array.isRequired
},
getInitialState: function(){
return {
id : parseInt(Math.random()*100000,10)+'i',
value: this.props.value
};
},
handleChanged: function(e){
// e.stopPropagation();
},
renderChoices: function(){
return this.props.choices.map(function(choice,i){
return <AnswerRadioInput key={i} id={'choice-'+i} name={this.props.value} label={choice} value={this.props.choiceValue[i]} onChange={this.handleChanged}/>;
}.bind(this));
},
render: function(){
return (
<div className="form-group">
<label className="survey-item-label" htmlFor={this.state.id}>
{this.props.label}
</label>
<div className="survey-item-content">
{this.renderChoices()}
</div>
</div>
);
}
});
现在只需要把这个组件暴露出来
module.exports = AnswerMultipleChoiceQuestion;
应用
ReactDOM.render(<AnswerMultipleChoiceQuestion value={'fruit'} label={'最喜欢的水果是哪一个'} choices={['a.苹果','b.西瓜','d.香蕉','d.葡萄']}/>,document.getElementById('wrapper'));
这样只能生产一个选择题，如果想要生产多个选择题，像开始图片展示那样，则可以再多生成一个父组件。将这个AnswerMultipleChoiceQuestion整合到这个父组件中。
1.需要传入每道选择题的问题内容label；
2.需要传入每个选项的name值；
3.需要传入每个选项的内容label;
4.需要传入每个选项的value值；
5.可以考虑传入这些选择题的标题title;
var ReactDOM = require('react-dom');
var React = require('react');
var AnswerMultipleChoiceQuestion = require('./Choice.jsx');
var MoreChoicesQuestion = React.createClass({
propTypes: {
values: React.PropTypes.array.isRequired,
title: React.PropTypes.string.isRequired,
labelArray: React.PropTypes.array.isRequired,
choiceArray: React.PropTypes.array.isRequired
},
renderMore: function(){
return this.props.choiceArray.map(function(choices,i){
return <AnswerMultipleChoiceQuestion key={'question'+i} value={this.props.values[i]} label={this.props.labelArray[i]} choiceValue={this.props.choicesValue[i]} choices={choices}/>;
}.bind(this));
},
render: function(){
return (
<div className="question-wrapper">
<h3>{this.props.title}</h3>
<div className="questions">
{
this.renderMore()
}
</div>
</div>
);
}
});
ReactDOM.render(<MoreChoicesQuestion values={['fruit','country','subject']} title={'个人喜好调查问卷'} labelArray={['1.以下最喜欢的水果是哪一个？','2.以下最喜欢的国家是哪一个?','3.以下最喜欢的科目是哪一个？']} choiceArray={[['a.苹果','b.西瓜','c.香蕉','d.葡萄'],['a.中国','b.法国','c.英国','d.美国'],['a.数学','b.英语','c.语文','d.物理']]} choicesValue={[['apple','watermelon','banana','grape'],['China','France','England','America'],['math','English','chinese','physics']]}/>,document.getElementById('wrapper'));
表达有点乱~~~
