MUI 多个 select 添加按钮后不起作用

Question

想要在 select 下拉菜单下方添加具有特定高度的按钮，但是当我尝试将菜单项放入 div 时，多个 select 停止工作，不知道为什么会这样。 需要帮忙 ！！！

代码沙盒： https://codesandbox.io/s/eloquent-breeze-flkcjl?file=/src/App.tsx:0-1666

   import "./styles.css";
   import { useState } from "react";

   import {
   Select,
   Typography,
   MenuItem,
   Box, 
   SelectChangeEvent,
    Button
   } from "@mui/material";

   const displayedBlockOptions = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

   export default function App() {
   const [val, setVal] = useState<string[]>([]);

   const handleChange = (event: SelectChangeEvent<typeof val>) => {
   const {
   target: { value }
   } = event;
   setVal(typeof value === "string" ? value.split(",") : value);
   };
   return (
   <div className="App">
   <Select
    displayEmpty
    multiple
    // MenuProps={{
    //   sx: { height: "300px" }
    // }}
    value={val}
    onChange={handleChange}
    renderValue={(selected: any) => {
      if (selected.length === 0) {
        return (
          <Typography noWrap fontWeight={400} fontSize="13px">
            Select
          </Typography>
        );
      }

      return selected.join(", ");
    }}
   >
    <Box sx={{ height: "200px", overflow: "auto" }}>
      {displayedBlockOptions.map((option: any, i: any) => (
        <MenuItem key={i} value={option}>
          {option}
        </MenuItem>
      ))}
    </Box>
    <Box
      mt={2}
      display="flex"
      justifyContent="flex-end"
      alignItems="center"
    >
      <Button sx={{ mx: 1 }} size="small" variant="outlined">
        Cancel
      </Button>
      <Button sx={{ mx: 1 }} size="small" variant="contained">
        Done
      </Button>
    </Box>
   </Select>
   </div>
   );
   }

Answer 1

你不能在 Select 组件中使用 Box 和 Button，像这样使用它：

 import "./styles.css"; import { useState } from "react"; import { Select, Typography, MenuItem, Box, SelectChangeEvent, Button } from "@mui/material"; const displayedBlockOptions = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]; export default function App() { const [val, setVal] = useState<string[]>([]); const handleChange = (event: SelectChangeEvent<typeof val>) => { const { target: { value }, } = event; setVal(typeof value === "string"? value.split(","): value); }; return ( <div className="App"> <Box> <Select displayEmpty multiple // MenuProps={{ // sx: { height: "300px" } // }} value={val} onChange={handleChange} renderValue={(selected: any) => { if (selected.length === 0) { return ( <Typography noWrap fontWeight={400} fontSize="13px"> Select </Typography> ); } return selected.join(", "); }}> {displayedBlockOptions.map((option: any, i: any) => ( <MenuItem key={i} value={option}> {option} </MenuItem> ))} </Select> </Box> <Box mt={2} display="flex" justifyContent="flex-end" alignItems="center"> <Button sx={{ mx: 1 }} size="small" variant="outlined"> Cancel </Button> <Button sx={{ mx: 1 }} size="small" variant="contained"> Done </Button> </Box> </div> ); }