使用下面的代码来显示和选择选项。我在按钮中指定的任何样式都适用于显示的所有选项,而不仅仅是单击的选项。单击可在选择和取消选择所单击的选项之间切换。可以选择多个选项。 onSelect 函数更新所选选项的状态,并按预期工作。
function OptionList(props) {
function handleclick() {
props.onSelect(props.id);
}
return (
<div classname="questions">
<button onClick={handleclick}> {props.option} </button>
</div>
);
}
来自 .CSS 文件的初始显示属性:
.questions button {
width: 500px;
height: 60px;
margin: 10px 0;
align-items:flex-start;
border-radius: 10px;
font-size: 1.5rem;
border: 1px solid rgb(253,128,155)
}