javascript - 在保持过滤器的同时 react 选择清除值

Question

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

当我点击 react-select 显示的选项时，我希望将此选项添加到我的允许用户列表(由另一个组件处理的列表)。这部分有效，我只是在选择上使用了一个 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 实现这一点？

非常感谢!

Answer 1

此代码有效。也许有更好的方法。

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