React-Select Creatable을 사용하여 사용자가 중복 값을 생성하지 못하게하는 방법?

Question

나는 반응 선택 'Creatable을 사용하여 드롭 다운을 만들고 사용자가 목록에 새 항목을 만들 수있게합니다.

<Creatable 
    name="form-field-name" 
    value={this.props.selectWorker} 
    options={this.props.selectWorkers} 
    onChange={this.props.handleSelectWorker} 
/> 

현재 사용자는 아래 그림과 같은 중복을 생성, 이미 존재하더라도 새 이름을 만들 수 있습니다

이 내가 가진 것입니다.

나는 옵션이 react-select site에 isOptionUnique라는이 있음을 보았다.

옵션 집합 내에서 일치하는 옵션을 검색합니다. 이 함수는 중복 옵션을 만들 수 없도록합니다. 기본적으로 은 라벨과 값을 대/소문자를 구분하여 비교하는 기본 구문입니다. 예상 서명 : ({옵션 : 개체, 옵션 : 배열, labelKey : 문자열, valueKey : 문자열}) : 나는 그것을 사용하지 못하고

부울. 나는 isOptionUnique=true, isOptionUnique={options:this.props.workers}을 시도했지만, Creatable.js:173 Uncaught TypeError: isOptionUnique is not a function 오류가 발생했습니다.

isOptionUnique에 대한 예제를 찾을 수 없습니다. Creatable을 사용하여 중복 방지를 위해 반응 선택을 필터링하는 가장 좋은 방법은 무엇입니까?

는

Answer 1

그것은 기능을 기대하고 있어요

isOptionUnique(prop) { 
    const { option, options, valueKey, labelKey } = prop; 
    return !options.find(opt => option[valueKey] === opt[valueKey]) 
} 

이 구성 요소 인스턴스

isOptionUnique={this.isOptionUnique}