React에 대한 선택 제어. Keystonejs에서 사용하기 위해 처음 구축되었습니다.
라이브 데모 및 포괄적 인 문서에 대해서는 React-Select.com을 참조하십시오.
react-select ThinkMill과 Atlassian이 자금을 지원합니다. 우리는 커뮤니티가 지속적으로 지원하는 오픈 소스 프로젝트입니다.
React Select는 중요한 부품을 사용자 정의하지 않고 상자 밖으로 작동하는 강력한 선택 구성 요소를 개발하는 데 도움이됩니다.
이 구성 요소의 이야기를 보려면 React Conf 2019에서 Jed의 대화를보십시오 - Building React Select
기능은 다음과 같습니다.
React-Select를 사용하는 가장 쉬운 방법은 NPM에서 설치하고 웹 팩을 사용하여 앱에 빌드하는 것입니다.
yarn add react-select
그런 다음 앱에서 사용하십시오.
import React , { useState } from 'react' ;
import Select from 'react-select' ;
const options = [
{ value : 'chocolate' , label : 'Chocolate' } ,
{ value : 'strawberry' , label : 'Strawberry' } ,
{ value : 'vanilla' , label : 'Vanilla' } ,
] ;
export default function App ( ) {
const [ selectedOption , setSelectedOption ] = useState ( null ) ;
return (
< div className = "App" >
< Select
defaultValue = { selectedOption }
onChange = { setSelectedOption }
options = { options }
/ >
< / div >
) ;
} 지정할 수있는 일반적인 소품은 다음과 같습니다.
autoFocus - 컨트롤이 장착 될 때 초점을 맞추십시오className 컨트롤에 클래스 이름을 적용하십시오classNamePrefix 주어진 접두사를 사용하여 내부 요소에 클래스 이름 적용isDisabled 컨트롤을 비활성화합니다isMulti 사용자가 여러 값을 선택할 수 있습니다isSearchable 사용자가 일치하는 옵션을 검색하도록 허용name - 현재 값을 포함하는이 이름으로 HTML 입력을 생성합니다.onChange 이벤트 변경에 가입하십시오options - 사용자가 선택할 수있는 옵션을 지정합니다.placeholder - 옵션이 선택되지 않을 때 표시되는 텍스트 변경noOptionsMessage ({inputValue : String}) => String | NULL- 옵션이 없을 때 표시 할 텍스트value - 현재 값을 제어하십시오PROPS React-SELECT 지원에 대한 전체 문서에 대한 소품 문서를 참조하십시오.
값을 제공하여 다음 소품을 제어 할 수 있습니다. 그렇지 않으면 React-Select가 귀하를 위해 관리합니다.
value / onChange 컨트롤의 현재 값 지정menuIsOpen / onMenuOpen / onMenuClose 메뉴가 열려 있는지 제어inputValue / onInputChange 검색 입력 값을 제어합니다 (변경 사항 변경 사용 가능한 옵션을 업데이트합니다)이 소품을 제공하지 않으면 통제하는 상태의 초기 값을 설정할 수 있습니다.
defaultValue 컨트롤의 초기 값을 설정하십시오defaultMenuIsOpen 메뉴의 초기 개방 값 설정defaultInputValue 검색 입력의 초기 값 설정 React-Select는 두 가지 공개 방법을 노출시킵니다.
focus() - 프로그래밍 방식으로 제어에 초점을 맞 춥니 다blur() - 프로그래밍 방식으로 제어를 흐리게합니다 자세한 내용은 문서를 확인하십시오.
V5 릴리스는 JavaScript에서 TypeScript로 다시 쓰는 것을 나타냅니다. V4 및 이전 릴리스 유형은 @Types에서 제공됩니다. v5로 시작하는 유형을 사용하는 방법은 TypeScript 안내서를 참조하십시오.
이 프로젝트에 기여한 모든 분들께 감사드립니다. 그것은 거친 타기였습니다.
당신이 React Select를 좋아한다면, 당신은 트위터에서 나를 따라야합니다!
Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn 및 다른 많은 기고자들과 함께이 가능한 ❤️ 닐에게 소리 쳤다.
MIT 라이센스. 저작권 (c) Jed Watson 2022.
