필터를 유지하면서 실제 값을 선택 취소합니다.

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

이 코드는 작동합니다. 아마 더 좋은 방법이있을 것입니다.

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

사용자가 입력 한 텍스트를 유지하려면

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

는 당신이 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 }) 
}