React 中带有复选框的多级下拉菜单答案

【问题标题】：Multilevel drop downs with checkboxes in ReactReact 中带有复选框的多级下拉菜单
【发布时间】：2022-01-11 12:11:48
【问题描述】：

我想创建嵌套的下拉菜单，每个下拉菜单中都有这样的复选框：

有没有办法在反应中做到这一点。找不到使用任何特定库实现此功能的方法

【问题讨论】：

标签： javascript reactjs asynchronous checkbox dropdown

【解决方案1】：

您可以使用材质 ui 创建一个带有复选框的嵌套下拉列表

这是您可以查看的链接：

https://mui.com/components/checkboxes/

这是实现结果的材料 UI 的源代码：

import * as React from 'react';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

export default function IndeterminateCheckbox() {
  const [checked, setChecked] = React.useState([true, false]);

  const handleChange1 = (event) => {
    setChecked([event.target.checked, event.target.checked]);
  };

  const handleChange2 = (event) => {
    setChecked([event.target.checked, checked[1]]);
  };

  const handleChange3 = (event) => {
    setChecked([checked[0], event.target.checked]);
  };

  const children = (
    <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
      <FormControlLabel
        label="Child 1"
        control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
      />
      <FormControlLabel
        label="Child 2"
        control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
      />
    </Box>
  );

  return (
    <div>
      <FormControlLabel
        label="Parent"
        control={
          <Checkbox
            checked={checked[0] && checked[1]}
            indeterminate={checked[0] !== checked[1]}
            onChange={handleChange1}
          />
        }
      />
      {children}
    </div>
  );
}

这是我将材质 UI 组件与复选框组合在一起的代码框链接。

https://codesandbox.io/s/indeterminatecheckbox-material-demo-forked-o0vvw?file=/demo.js:0-2222

【讨论】：