React-选择清除值，同时保留过滤器

我正在开发一个权限系统，让用户控制谁可以访问/评论/编辑资源，就像您在 Google 云端硬盘上找到的资源一样。我正在使用 React-Select multi 让资源所有者选择他想要授予资源访问权限的用户。

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

export default class AddUsersForm extends Component {

  PropTypes = {
    onSubmit: PropTypes.func.isRequired,
    usersList: PropTypes.array.isRequired, // List of all users in the company
    usersInPermissions: PropTypes.array.isRequired, // Users who already have access to the resource
  }

  handleChange(users){
    // Adds new user to the list of allowed users, an updated value for this.props.usersInPermissions will be received
    this.props.onSubmit(users);
  }

  render() {
    return (
      <form>
        <Select
          name="users"
          multi={true}
          options={this.props.usersList.filter(user => !this.props.usersInPermissions.includes(user.id))}
          onChange={(users) => this.handleChange(users)}
        />
      </form>
    );
  }

}

这就是我陷入困境的地方：添加选项后，我想继续显示用户在文本字段中搜索第一个选项时可能使用的过滤器。现在的工作方式是，过滤器被删除，所有选项都显示在下拉列表中。

有没有简单的方法可以使用 React-Select 来实现这一目标？

非常感谢！

这段代码正在运行。也许还有更好的方法。

// ManageUsers
import React, { PropTypes } from 'react';
import AddUserForm from './AddUserForm'

export default class NoMatch extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this);

    let selectedUsers = [ { value: 3, label: 'Three' },
      { value: 4, label: 'Four' } ];

    this.state = {
      selectedUsers: selectedUsers
    }
  }

  handleChange(selected) {
    this.setState({ selectedUsers: selected })
  }

  render() {
    let usersList = [
      { value: 1, label: 'One' },
      { value: 2, label: 'Two' }
    ];

    return (
      <div>Users
        <AddUserForm usersList={usersList} 
         selectedUsers={this.state.selectedUsers} 
         handleChange={this.handleChange} />
      </div>
    );
  }
}

// AddUsersForm
import React, { PropTypes } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

export default class AddUsersForm extends React.Component {
 PropTypes = {
  usersList: PropTypes.array.isRequired,
  selectedUsers: PropTypes.array.isRequired,
  handleChange: PropTypes.func.isRequired
 }

 render() {
  return (
   <form>
    <Select
     multi={true}
     options={this.props.usersList}
     value={this.props.selectedUsers}
     onChange={(users) => this.props.handleChange(users)}
    />
   </form>
  );
 }
}

如果你想保留输入的文本，那么你必须在handleChange上设置输入的文本。没有内置函数来保存键入的文本。

 onChange={(users) => this.props.handleChange(users, event)}

handleChange(selected, event) {
let selectedFilter = event.target;
 // then navigated to the input element with Javascript or jQuery
 // and set the value of the input

this.setState({ selectedUsers: selected })
}