自动完成物料界面React中的[全选]、[不选]按钮

Question

我想在自动完成React Material UI中实现两个按钮:全选和全选，以及每个option.When的复选框单击全选按钮时，所有选项都必须选中，当我单击全部不选时，所有选项都必须取消选中。我该如何实现它呢？

<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

今天早些时候我碰巧遇到了同样的问题。诀窍是使用本地状态来管理已选择的内容，如果本地状态中包含“all”键，则将renderOption更改为选中*复选框。我快到最后期限了，所以我会为你留下一个codesandbox的解决方案，而不是匆忙的解释。希望它能有所帮助：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}
    ...  
/>