3

私は、Google ドライブで見つけられるものと同じように、ユーザーがリソースにアクセス/コメント/編集できるユーザーを制御できるようにするパーミッション システムに取り組んでいます。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 でこれを達成する簡単な方法はありますか?

どうもありがとう!

4

2 に答える 2