如何对 mui-select 和 mui-datepicker 执行关闭按钮？

Question

我想向 mui-select 和 mui-datepicker 添加一个关闭按钮。

试图找到但找不到。

有人知道该怎么做吗？

Answer 1

您可以通过手动控制选择的状态来做到这一点。属性

open

、

onOpen

、

onClose

可以帮助您。

import * as React from 'react';
import {
  OutlinedInput,
  InputLabel,
  MenuItem,
  FormControl,
  Select,
  Checkbox,
  Button
} from '@mui/material';

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
];

export default function MultipleSelectCheckmarks() {
  const [personName, setPersonName] = React.useState([]);
  const [showSelect, setShowSelect] = React.useState(false);

  const handleChange = (e) => {
    setPersonName(e.target.value.filter(Boolean));
  };

  return (
    <FormControl sx={{ m: 1, width: 300 }}>
      <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
      <Select
        multiple
        open={showSelect}
        onOpen={() => setShowSelect(true)}
        onClose={() => setShowSelect(false)}
        labelId="demo-multiple-checkbox-label"
        id="demo-multiple-checkbox"
        value={personName}
        onChange={handleChange}
        input={<OutlinedInput label="Tag" />}
        renderValue={(selected) => selected.join(', ')}
      >
        {names.map((name) => (
          <MenuItem key={name} value={name}>
            <Checkbox checked={personName.includes(name)}/>
            {name}
          </MenuItem>
        ))}
        <Button
            color='success'
            variant='contained'
            onClick={() => {
                setShowSelect(false);
            }}
        >
            Close
        </Button>
      </Select>
    </FormControl>
  );
}

Answer 2

感谢您的指点 Валерий Зайцев

如果您还想在用户单击离开时关闭 FormControl（例如没有专用的关闭按钮），请将 FormControl 属性“focus”设置为 false。 例如

焦点={showSelect} }}>

Answer 3

您可以使用以下“输入”属性作为替代方法来完成此操作。

<Select
                                    labelId={filter.columnField}
                                    id={filter.columnField + filter.type}
                                    value={filterValues[filter.columnField] || ""}
                                    label={filter.label}                                        
                                    onChange={(e) => {
                                        handleFilterValueChange(filter.columnField, e.target.value.toString(), filterTypes[filter.columnField])
                                    }}                                        
                                    variant="outlined"
                                    input={
                                        <OutlinedInput

                                            startAdornment={
                                                filterValues[filter.columnField] ? (
                                                    <InputAdornment position="start" >
                                                        <IconButton
                                                            aria-label="clear selection"
                                                            onClick={() => handleFilterValueChange(filter.columnField, "", filterTypes[filter.columnField])}
                                                            edge="start"
                                                            size="small"


                                                        >
                                                            <CloseIcon fontSize="small"></CloseIcon>
                                                        </IconButton>
                                                    </InputAdornment>
                                                ) : null
                                            }
                                        />
                                    }
                                >