[React-Select] 레이블 및 value 사용자 정의
6219 단어 react-selectReact
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' },
...
이대로 가다가는 다음과 같은 상황에 문제가 생길 것이다.label
및 value
필드가 없습니다(다른 필드 사용)여기 이번 제작의 시범.
계정을 만들 필요가 없습니다. 브라우저에서 이동할 수 있습니다. 시도해 보십시오.
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의 수가 의외라서 이 근처도 관계가 있을 것 같습니다.
참고 자료
Reference
이 문제에 관하여([React-Select] 레이블 및 value 사용자 정의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Doarakko/items/e25af1989844fce85ed8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)