Question

我想在自动完成的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

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

Answer 2

更新

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

// in index.js

try {
  command.execute(message, args, client)
} catch (error) {

// in pat.js

execute: async (message, args, client) => {
  // ...
}}

旧答案

只需自定义 PopperComponent 即可。

Autocomplete API

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}  
      .....
      ....
    />
);

在自动完成材料UI React

2 个答案: