在保持过滤器的同时反应选择清除值 [英] React-select clear value while keeping filter

问题描述

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

I'm working on a permissions system to let users control who can access/comment/edit a resource, much like what you can find on Google Drive. I'm using a React-Select multi to let the owner of the resource pick users he wants to give access to the resource to.

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

When I click on an option displayed by react-select, I want this option to be added to my list of allowed users (a list that is handled by another component). This part works, I just used an onChange handler on the select (as you can see on the code below).

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

}

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

This is where I am stuck: once the option has been added, I would like to keep displaying the filter that the user was potentially using while searching for the first option in the text field. The way it works now, the filter is removed and all the options are shown in the dropdown.

有没有简单的方法来实现React-Select？

Is there any simple way of achieving this with React-Select?

非常感谢！

推荐答案

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

This code is working. Maybe there are better ways.

// 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上设置输入的文本。没有内置函数来保存键入的文本。

If you want to keep the typed text then you have to set the text of the input on the handleChange. There is no build in function to keep the typed text.

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

这篇关于在保持过滤器的同时反应选择清除值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！