问题描述
我正在尝试在 AccordionDetails 中嵌套一个 RadioGroup,然后将 Accordion 列表作为选项插入自动完成 > 组件在其 renderOption 道具中。
我遇到的问题是,单击单选按钮的标签(检查时为跨度元素)会关闭自动完成下拉列表,而不会将所选值保存到状态。
提前致谢!
代码沙盒: https://codesandbox.io/s/material-demo-forked-brun8?file=/demo.js
解决方法
点击标签面板时使用 e.preventDefault()
const getLabel = ({ label,value }) => (
<div
value={value}
onClick={(e) => {
setValue(e.target.getAttribute("value"));
e.preventDefault();
}}
>
{label}
</div>
);
表单控件标签:-
<FormControlLabel
value="other"
control={<Radio />}
label={getLabel({ label: "Others",value: "other" })}
/>
代码沙盒 - https://codesandbox.io/s/material-demo-forked-e3hom?file=/demo.js:2650-2836