多项选择题组件--react

Posted 2023-02-25

参考技术A 最近在一本react书上看到一个多项选择题的react组件，做了一些改动。实现一个多项选择题的组件很简单，但是这里主要讲了它的实现思路。以下是实现效果：

一个渲染选择题的组件要满足一下几个条件：
1.接受一组选项作为输入。
2.把选项渲染给用户。
3.只允许用户选择一个选项。
html提供了input（radio）单选输入框。
组件的层级从上往下看是这样的：
MultipleChoice(多个选择项的选择题) ->RadioInput（一个选项） -> Input(type="radio")
选择题组件MultipleChoice应该由一个个基本的选项组成（RadioInput），一个选项应该有一个输入单选框input构成。

首先将input(type="radio")组装到AnswerRadioInput这个组件中，

1.需要添加value和name值，表示传递的值；
2.文本，这个选项是什么内容
3.可能需要id
如此，可以把这些添加到PropTypes对象当中：

现在可以把这个组件整合到AnswerMultipleChoiceQuestion父组件中，这一层主要是渲染一列选项让用户从中选择。
1.需要传入给这个单选题传入name值
2.需要传入给这个单选题传入问题内容
2.需要传入每个选项label内容
3.需要传入每个选项的value值

现在只需要把这个组件暴露出来

这样只能生产一个选择题，如果想要生产多个选择题，像开始图片展示那样，则可以再多生成一个父组件。将这个AnswerMultipleChoiceQuestion整合到这个父组件中。
1.需要传入每道选择题的问题内容label；
2.需要传入每个选项的name值；
3.需要传入每个选项的内容label;
4.需要传入每个选项的value值；
5.可以考虑传入这些选择题的标题title;

表达有点乱~~~