反應選擇明確的值，同時保持過濾器

Question

我正在研究一個權限系統，讓用戶可以控制誰可以訪問/評論/編輯資源，就像您可以在Google雲端硬盤上找到的一樣。我正在使用React-Select multi來讓資源的所有者選擇他想要訪問資源的用戶。

當我點擊react-select顯示的選項時，我希望將此選項添加到允許的用戶列表（由另一個組件處理的列表）中。這部分起作用，我只是在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 }) 
}