React Select MUI Onclose 事件不会因从下拉列表中进行多项选择而被触发

Question

从下拉列表中选择多个值并单击外部后，下拉列表将关闭，但 onClose 事件不会被触发。我需要根据下拉列表中的选择来过滤数据。

例如，从下图中，我只需要显示批次 1 和批次 2 的数据。但是，由于 Select MUI 没有触发 Onclose，因此我的代码不会在 handleClose 内执行。

非常感谢任何帮助。

()

这是代码片段

import React from 'react';
import PropTypes from 'prop-types';
import Input, { InputLabel } from 'material-ui/Input';
import MenuItem from '@material-ui/core/MenuItem';
import Chip from '@material-ui/core/Chip';
import FormControl from "@material-ui/core/FormControl";
import Select from '@material-ui/core/Select';
import { withStyles } from 'material-ui/styles';
import {multiSelectorStyles} from '../../componentStyles';
import Checkbox from '@material-ui/core/Checkbox';



class MultiSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      selectedItems : [],
    };
  }

  handleChange(event) {
    this.props.onChange(event.target.value);
  }

  handleSelectedItems = (event) => {
    const {
      target: { value },
    } = event;
    this.setState({
      selectedItems: typeof value === 'string' ? value.split(',') : value,
    })

  };

  handleClose = () => {
     console.log("--Onclose event triggered---");
    //const { selectedItems} = this.state;
    //const { pendingKey } = this.props;
    //this.props.applyFilter(selectedItems, pendingKey)
  };

  render() {
    const { selectedItems} = this.state;
    const options =this.props.suggestions.map((suggestion,index) => (
      <option key={index} value={suggestion.key || suggestion}>{suggestion.name || suggestion}</option>
    ));

    return (
      this.props.useInputDataList ?
        <span>
          <input
            list="datalist"
            value={this.props.value}
            onChange={(event) => this.handleChange(event)}/>
          <datalist id="datalist">{options}</datalist>
        </span>
        :
        <span>{this.props.selectorLabel}
          <FormControl>
            <Select
              multiple
              value={selectedItems}
              onChange={(event) => this.handleSelectedItems(event)}
              onClose= {this.handleClose}
              input={<Input />}
              renderValue={selected => (
                <div style={{overflow: 'scroll'}}>
                  {selected.map(value => (
                    <Chip key={value} label={value} />
                  ))}
                </div>
              )}
            >
              {this.props.suggestions.map((suggestion,index) => (
                <MenuItem key={index} value={suggestion.key || suggestion.name}>
                  <Checkbox checked={selectedItems.indexOf(suggestion.key) > -1}/>
                  {suggestion.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </span>
    );
  }
}

MultiSelector.propTypes = {
  classes: PropTypes.object,
  suggestions: PropTypes.array,
  onChange : PropTypes.func,
  value: PropTypes.array,
  label: PropTypes.string,
  selectorLabel:PropTypes.string,
  useInputDataList: PropTypes.bool,
};


export default (withStyles(multiSelectorStyles)(MultiSelector));

Answer 1

在此阶段您可以使用“onChange”进行过滤。对于每个 onChange，您的过滤器都会被触发。

handleSelectedItems = (event) => {
  const { target: { value } } = event;
  this.setState({
    selectedItems: typeof value === 'string' ? value.split(',') : value,
  });

  // Assuming a prop to update data
  // Apply filtering logic here:
  const filteredData = this.props.data.filter(item =>
    this.state.selectedItems.includes(item.batch)
  );
  this.props.updateData(filteredData); 
};

您还可以通过设置依赖项来触发过滤器来使用 useEffect。