[React-Select] 레이블 및 value 사용자 정의

1. React-Select란 무엇인가

React-Select는 React 제조의 구성 요소로 선택 상자에 자동 완성 (입력을 통해 축소), 다중 선택, async 기능이 있습니다.

2. 할 일

기본적으로 label 필드, 검색 value 필드가 표시됩니다.

{ value: 'ocean', label: 'Ocean' },
{ value: 'blue', label: 'Blue'},
{ value: 'purple', label: 'Purple' },
{ value: 'red', label: 'Red' },
{ value: 'orange', label: 'Orange' },
...

이대로 가다가는 다음과 같은 상황에 문제가 생길 것이다.

JSON에는 label 및 value 필드가 없습니다(다른 필드 사용)

API 응답 등을 사용하는 경우

사용자 정의 디스플레이

여러 필드 조합

상술한 상황도 라이브러리로 덮여 있지만 공식 문서 이해하기 어려워 어떻게 해야 좋을지 정리했다.
여기 이번 제작의 시범.
계정을 만들 필요가 없습니다. 브라우저에서 이동할 수 있습니다. 시도해 보십시오.

3. 해설

1. 이번에 처리된 JSON

종업원 사장 같은 물건을 만들다.

{
    EmployeeId: 1,
    FirstName: "田中",
    LastName: "健太郎",
    DepartmentId: 2,
    DepartmentName: "営業"
},{
    EmployeeId: 2,
    FirstName: "山田",
    LastName: "五郎",
    DepartmentId: 2,
    DepartmentName: "営業"
},{
    EmployeeId: 3,
    FirstName: "マット",
    LastName: "マックス",
    DepartmentId: 2,
    DepartmentName: "カスタマー"
},{
...
},{
    EmployeeId: 6,
    FirstName: "マット",
    LastName: "マックス",
    DepartmentId: 4,
    DepartmentName: "開発"
}

전체 이름과 부서를 표시하고 검색하는 것이 목표입니다.

2. 디스플레이 사용자 정의

formatOptionLabel 전달 함수.

<Select
    // omit
    formatOptionLabel={formatOptionLabel}
/>

함수 매개 변수에 사용할 필드를 입력하면 됩니다.

const formatOptionLabel = ({ FirstName, LastName, DepartmentName }) => (
  <div style={{ display: "flex" }}>
    <div>
      {FirstName} {LastName}
    </div>
    <div style={{ marginLeft: "10px", color: "#999" }}>{DepartmentName}</div>
  </div>
);

3. 검색할 문자열

이렇게 하면 부서에서 검색할 수 없기 때문에 getOptionLabel 검색할 필드를 지정합니다.

이번 대상은 전명과 부서다.

<Select
    // omit
    getOptionLabel={option =>
        option["FirstName"] + option["LastName"] + option["DepartmentName"]
    }
/>

끝내다

나는 React Autosuggest로 비슷한 것을 보았지만, 나는 React-Select가 더욱 사용하기 쉽다고 생각한다.
다만 Issue의 수가 의외라서 이 근처도 관계가 있을 것 같습니다.

참고 자료

이번 시위 행진.

React-Select: 공식 문서