我有一个反应组件,其中我想要包含一些单选按钮。
Single.js
class Single extends Component {
render() {
const {questions, choices, actions} = this.props;
const {id} = this.props.params;
const i = questions.findIndex(x => x.id == id);
const question_obj = questions[i];
return (
<div className = 'QuestionSection'>
<h2> Poll Your Choice </h2>
{question_obj.question_text}
<form ref = 'choiceForm'>
{
choices.map((choice, i) => <Choice {...this.props} key = {i} i = {i} choice = {choice}/>)
}
</form> </div>
);
}
}
选择对象数组映射到另一个组件Choices.js,其中每个选项都呈现为一个单选按钮。
由于每个对象都是单独渲染的,因此我无法处理单选按钮选择。
如何循环遍历此选择对象数组以创建包含每个对象的单选按钮并处理单选按钮选项的选择/提交?