使用 FormControlLabel

如何解决使用 FormControlLabel

我正在尝试在 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