复选框无法签入React下拉菜单吗？

如何解决复选框无法签入React下拉菜单吗？

我正在使用React.js中的下拉菜单，该菜单用作页面某些项目的过滤器。过滤器功能工作正常，但是当我去检查其中一个过滤器时，检查没有显示。

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

function Filter() {  
    const [anchorEl,setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const handleChange = (event) => {
        setState({ ...state,[event.target.name]: event.target.checked });
    };
    
    return(
    <div>
      <Button style={{color: "white"}} onClick={handleClick}>Filter</Button>
            <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                <div>
                    <MenuItem>
                        <label for="one"><input type="checkbox" id="one" name="filter" onChange={handleChange} value="opt1" /> Option1</label>
                    </MenuItem>
                </div>
                <div>
                    <MenuItem>
                        <label for="two"><input type="checkbox" id="two" name="filter" onChange={handleChange} value="Photography" className="medium" /> Photography</label>
                    </MenuItem>
                </div>
            </Menu>
        </div>
    )
}

基本上，我希望单击复选框时显示复选框中的复选框。如何让他们展示？我进行了检查，以确保我对要在它们之间使用的name和div的复选框使用正确的约定，但是我想知道为什么它仍然不显示。我正在使用Material-UI库的组件：https://material-ui.com/components/menus/

解决方法

因为输入名称相等，所以您将名称更改为：

<div>
    <MenuItem>
     <label for="one"><input type="checkbox" id="one" name="filter1" onChange={handleChange} value="opt1" /> Option1</label>
    </MenuItem>
</div>
<div>
    <MenuItem>
       <label for="two"><input type="checkbox" id="two" name="filter2" 
         onChange={handleChange} value="Photography" className="medium" /> 
         Photography</label>
    </MenuItem>
</div>

,

主要问题在于handleChange函数-范围内没有setState。 对于功能组件，您可以使用useState挂钩来控制状态。

我也建议您使用mui Checkbox组件-因为您仅需要以下3个属性来控制其状态：name，checked和onChange。 这是带有您的代码的示例：

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Checkbox from "@material-ui/core/Checkbox";

export default function Filter() {
  const [anchorEl,setAnchorEl] = React.useState(null);
  const [filterState,setFilterState] = React.useState({
    filter1: false,filter2: false
  });

  const handleChange = (event) => {
    setFilterState({
      ...filterState,[event.target.name]: event.target.checked
    });
  };

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button onClick={handleClick}>Filter</Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <div>
          <MenuItem>
            <Checkbox
              name="filter1"
              checked={filterState.filter1}
              onChange={handleChange}
            />
          </MenuItem>
        </div>
        <div>
          <MenuItem>
            <Checkbox
              name="filter2"
              checked={filterState.filter2}
              onChange={handleChange}
            />
          </MenuItem>
        </div>
      </Menu>
    </div>
  );
}