自动完成材质 UI React 中的全选和全选按钮

Question

我想在Autocomplete React Material UI中实现两个按钮全选和全选以及每个选项的复选框。单击全选按钮时，必须选中所有选项，单击全选时，必须取消选中所有选项. 我该如何实现？

<Autocomplete
      id={id }
      size={size}
      multiple={multiple}
      value={value}
      disabled={disabled}
      options={items}
      onChange={handleChange}
      getOptionLabel={option => option.label}
      renderOption={(option, { selected }) => (
        <React.Fragment >
          {isCheckBox(check, selected)}
          {option.label}
        </React.Fragment>
      )}
      renderInput={params => (
        <TextField id="dropdown_input"
          {...params} label="controlled" variant={variant} label={label} placeholder={placeholder} />
      )}
    />
export function isCheckBox(check, selected) { 
  if (check) {
    const CheckBox = <Checkbox
      id="dropdown_check"
      icon={icon}
      checkedIcon={checkedIcon}
      checked={selected}
    />
    return CheckBox;
  }
  return null;
}

Answer 1

我今天早些时候偶然发现了同样的问题。 诀窍是使用本地状态来管理已选择的内容，如果本地状态中有“全部”键，则将 renderOption 更改为选择 * 复选框。 我到了最后期限，所以我会为您留下一个代码沙盒解决方案，而不是匆忙解释。希望能帮助到你 ： Select All AutoComplete Sandbox

Answer 2

更新

适用于 React 版本 16.13.1 及更高版本。 codesandbox

const [open, setOpen] = useState(false);
const timer = useRef(-1);

const setOpenByTimer = (isOpen) => {
    clearTimeout(timer.current);
    timer.current = window.setTimeout(() => {
      setOpen(isOpen);
    }, 200);
}

const MyPopper = function (props) {
    const addAllClick = (e) => {
      clearTimeout(timer.current);
      console.log('Add All');
    }
    const clearClick = (e) => {
      clearTimeout(timer.current);
      console.log('Clear');
    }
    return (
      <Popper {...props}>
        <ButtonGroup color="primary" aria-label="outlined primary button group">
          <Button color="primary" onClick={addAllClick}>
            Add All
          </Button>
          <Button color="primary" onClick={clearClick}>
            Clear
          </Button>
        </ButtonGroup>
        {props.children}
      </Popper>
    );
};
return (
    <Autocomplete
      PopperComponent={MyPopper}     
      onOpen={(e) => {
        console.log('onOpen');   
        setOpenByTimer(true);    
      }}
      onClose={(obj,reason) => {
        console.log('onClose', reason);
        setOpenByTimer(false);       
      }}
      open={open}  
      .....
      ....
    />
);

旧答案

只需自定义 PopperComponent 并为所欲为。

Autocomplete API

const addAllClick = (e: any) => {
    setValue(items);
};
const clearClick = (e: any) => {
    setValue([]);
};
const MyPopper = function (props: any) {
    return (
      <Popper {...props}>
        <ButtonGroup color="primary" aria-label="outlined primary button group">
          <Button color="primary" onClick={addAllClick}>
            Add All
          </Button>
          <Button color="primary" onClick={clearClick}>
            Clear
          </Button>
        </ButtonGroup>      
        {props.children}
      </Popper>
    );
};
<Autocomplete
    PopperComponent={MyPopper}
    ...  
/>