フィルタを維持している間にクリア値を選択して反応を選択します

Question

Googleドライブでの検索と同様に、ユーザーがリソースへのアクセス/コメント/編集ができるユーザーを制御できるように、私はReact-Selectマルチを使用して、リソースの所有者がリソースへのアクセスを許可したいユーザーを選ぶようにしています。

私がreact-selectで表示されたオプションをクリックすると、このオプションを許可されたユーザーのリスト（別のコンポーネントによって処理されるリスト）に追加します。この部分はうまくいきました。select（on）の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 }) 
}