为 FormControlLabel 使用 label 道具

Question

我正在尝试将 RadioGroup 嵌套在 AccordionDetails 中，然后插入 Accordion 列表作为其 renderOption 道具中 Autocomplete 组件内的选项。

我遇到的问题是，单击单选按钮的标签（在检查时是跨度元素）会关闭自动完成下拉列表，而不会将所选值保存到状态。

提前致谢！

代码沙盒： https://codesandbox.io/s/material-demo-forked-brun8?file=/demo.js

Answer 1

点击标签面板使用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" })}
            />

Codesandbox - https://codesandbox.io/s/material-demo-forked-e3hom?file=/demo.js:2650-2836

为 FormControlLabel 使用 label 道具

Using the label prop for FormControlLabel

reactjs

autocomplete

material-ui

accordion

radio