Javascript 反应选择清除值，同时保留过滤器

我正在开发一个权限系统，让用户控制谁可以访问/评论/编辑资源，就像你可以在谷歌硬盘上找到的一样。我使用React-SelectMulti让资源所有者选择他希望授予其资源访问权的用户

当我单击react select显示的选项时，我希望将此选项添加到我的允许用户列表（由另一个组件处理的列表）中。这部分工作正常，我只是在select上使用了一个onChange处理程序（如下面的代码所示）

导出默认类AddUsersForm扩展组件{
PropTypes={
onSubmit:PropTypes.func.isRequired，
usersList:PropTypes.array.isRequired，//公司中所有用户的列表
usersInPermissions:PropTypes.array.isRequired，//已具有资源访问权限的用户
}
handleChange（用户）{
//将新用户添加到允许的用户列表中，将收到this.props.usersInPermissions的更新值
this.props.onSubmit（用户）；
}
render（）{
返回(
！this.props.usersInPermissions.includes（user.id））}
onChange={（用户）=>this.handleChange（用户）}
/>
);
}
}

此代码正在运行。也许有更好的方法

//管理用户
从“React”导入React，{PropTypes}；
从“./AddUserForm”导入AddUserForm
导出默认类NoMatch扩展React.Component{
建造师（道具）{
超级（道具）
this.handleChange=this.handleChange.bind（this）；
让selectedUsers=[{value:3，标签：'Three'}，
{value:4，标签：'Four'}]；
此.state={
selectedUsers：selectedUsers
}
}
handleChange（已选）{
this.setState（{selectedUsers:selected}）
}
render（）{
让用户列表=[
{value:1，标签：'One'}，
{值：2，标签：'Two'}
];
返回(
使用者

onChange={（用户）=>this.props.handleChange（用户，事件）}

handleChange（已选择，事件）{
让selectedFilter=event.target；
//然后使用Javascript或jQuery导航到输入元素
//并设置输入的值
this.setState（{selectedUsers:selected}）
}
我的方式：

将
选项
组件替换为自己的组件（材质UI库中的多个组件）
重写的
onClick
事件处理程序-下面是一些逻辑，并从ReactSelect props调用
onChange
处理程序。在
onClick
处理程序的末尾添加了
event.stopPropagation（）
我想把它从值中删除？你能解释一下吗？你检查过了吗？@Ved我刚才真的很困惑，这没有任何意义！所以我唯一的问题是把过滤器放在那里，你知道有没有办法做到这一点吗？我的问题是，一旦你从select中选择任何值，你下一步想要什么？@Ved想象我没有在搜索框中键入几个字母以查找用户。然后该用户出现在下拉列表中，当我单击该用户时，将调用onChange处理程序，并将其添加到我的允许用户列表中（目前效果良好）。但当我这样做时，我在文本字段中键入的字母将被删除，选项列表将不再被筛选。我想保留我的筛选器，但我不知道这是否可行？嗨，谢谢你的回复！我已经尝试了你的代码，它工作正常，但我仍然遇到与以前相同的问题，即如果我在文本中键入筛选器字段，然后选择一个选项，过滤器将从该字段中删除，选项列表将不再被过滤。您知道是否有办法更改此行为吗？也许您可以要求JetWatson/react select添加此功能或向输入添加一个引用。如果输入有一个引用，您可以使用react引用它并设置值好的，这就是我想的，我们需要改变反应选择来实现这一点。非常感谢你们的帮助！
import React from 'react';

import MenuItem from '@material-ui/core/MenuItem/MenuItem';
import Checkbox from '@material-ui/core/Checkbox/Checkbox';
import ListItemText from '@material-ui/core/ListItemText/ListItemText';

const MultiOption = props => (
  <MenuItem
    buttonRef={props.innerRef}
    {...props.innerProps}
    onClick={event => {
      let values = [];
      if (props.isSelected) {
        values = props.selectProps.value.filter(
          item => item.value !== props.value,
        );
      } else {
        values = [props.data].concat(props.selectProps.value);
      }
      props.selectProps.onChange(values);
      event.stopPropagation();
    }}
    style={{
      overflow: 'initial',
      padding: 0,
    }}
  >
    <Checkbox
      checked={props.isSelected}
      style={{
        padding: 4,
      }}
    />
    <ListItemText
      primary={props.label}
      classes={{
        root: props.selectProps.classes.optionRoot,
      }}
    />
  </MenuItem>
);

export default MultiOption;

import React from 'react';
import PropTypes from 'prop-types';
import Select from 'react-select';

import { withStyles } from '@material-ui/core/styles';

import { getComponents } from './components';

import { styles, getSelectStyles } from './styles';

class Combobox extends React.Component {
  handleChange = () => value => {
    const { onChange } = this.props;
    onChange(value);
  };

  render() {
    const {
      classes,
      theme,
      options,
      label,
      rootStyle,
      value,
      error,
      isInner,
      isMulti,
      fullWidth,
      ...props
    } = this.props;

    return (
      <div className={classes.root} style={{ ...rootStyle }}>
        <Select
          {...props}
          isClearable
          classes={classes}
          styles={getSelectStyles({
            theme,
            fullWidth,
          })}
          options={options}
          menuPortalTarget={document.body}
          menuPlacement="auto"
          value={value || null}
          onChange={this.handleChange()}
          components={getComponents({
            isInner,
            isMulti,
          })}
          textFieldProps={{
            label,
            error: !!error,
            helperText: error,
            InputLabelProps: { shrink: true },
          }}
          isMulti={isMulti}
          hideSelectedOptions={!isMulti}
          closeMenuOnSelect={!isMulti}
          loadingMessage={() => 'Loading...'}
        />
      </div>
    );
  }
}

Combobox.propTypes = {
  options: PropTypes.arrayOf(PropTypes.shape({})),
  label: PropTypes.string,
  classes: PropTypes.shape({}).isRequired,
  theme: PropTypes.shape({}).isRequired,
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool,
    PropTypes.arrayOf(PropTypes.any),
    PropTypes.shape({}),
  ]),
  error: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  isInner: PropTypes.bool,
  isMulti: PropTypes.bool,
  fullWidth: PropTypes.bool,
};

Combobox.defaultProps = {
  options: [],
  label: '',
  value: null,
  error: '',
  isInner: false,
  isMulti: false,
  fullWidth: false,
};

export default withStyles(styles, { withTheme: true })(({ ...props }) => (
  <Combobox {...props} />
));

import Control from './Control';
import InnerControl from './InnerControl';

import InputComponent from './InputComponent';
import MenuList from './MenuList';

import Option from './Option';
import MultiOption from './MultiOption';

import SingleValue from './SingleValue';
import MultiValue from './MultiValue';

import NoOptionsMessage from './NoOptionsMessage';

import Placeholder from './Placeholder';

import ValueContainer from './ValueContainer';

const getComponents = ({ isInner, isMulti }) => ({
  Control: isInner ? InnerControl : Control,
  ...(isMulti && { MenuList }),
  MultiValue,
  NoOptionsMessage,
  Option: isMulti ? MultiOption : Option,
  Placeholder,
  SingleValue,
  ValueContainer,
});

export {
  Control,
  InnerControl,
  InputComponent,
  MenuList,
  Option,
  MultiOption,
  SingleValue,
  MultiValue,
  NoOptionsMessage,
  Placeholder,
  ValueContainer,
  getComponents,
};