O controle de seleção para reação. Inicialmente construído para uso no Keystonejs.
Consulte React-select.com para demos ao vivo e documentos abrangentes.
react-select é financiado pelo ThinkMill e Atlassian. Somos um projeto de código aberto que é continuamente apoiado pela comunidade.
O React Select ajuda a desenvolver componentes selecionados poderosos que apenas funcionam fora da caixa, sem impedir que você personalize as peças que são importantes para você.
Para a história por trás deste componente, assista à palestra de Jed no React Confl 2019 - Construindo React Select
Os recursos incluem:
A maneira mais fácil de usar o React-Select é instalá-lo no NPM e construí-lo no seu aplicativo com o WebPack.
yarn add react-select
Em seguida, use -o em seu aplicativo:
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 >
) ;
} Adereços comuns que você pode querer especificar incluir:
autoFocus - concentre o controle quando ele montarclassName - aplique um nome de classe ao controleclassNamePrefix - Aplique nomes de classe em elementos internos com o prefixo fornecidoisDisabled - Desative o controleisMulti - permita ao usuário selecionar vários valoresisSearchable - Permita que o usuário pesquise opções de correspondêncianame - Gere uma entrada HTML com este nome, contendo o valor atualonChange - Inscreva -se para mudar eventosoptions - especifique as opções que o usuário pode selecionarplaceholder - altere o texto exibido quando nenhuma opção é selecionadanoOptionsMessage - ({InputValue: String}) => String | nulo - texto a ser exibido quando não há opçõesvalue - Controle o valor atualConsulte a documentação de adereços para obter a documentação completa sobre os suportes de seleção de react de adereços.
Você pode controlar os seguintes adereços, fornecendo valores para eles. Caso contrário, o React-Select os gerenciará para você.
value / onChange - Especifique o valor atual do controlemenuIsOpen / onMenuOpen / onMenuClose - Controle se o menu está abertoinputValue / onInputChange - Controle o valor da entrada de pesquisa (alterando isso atualizará as opções disponíveis)Se você não fornecer esses adereços, poderá definir o valor inicial do estado que eles controlam:
defaultValue - Defina o valor inicial do controledefaultMenuIsOpen - Defina o valor aberto inicial do menudefaultInputValue - Defina o valor inicial da entrada de pesquisa React-Select expõe dois métodos públicos:
focus() - Concentre o controle programaticamenteblur() - Blur o controle programaticamente Verifique os documentos para obter mais informações sobre:
A versão V5 representa uma reescrita de JavaScript para TypeScript. Os tipos de versões V4 e anteriores estão disponíveis no @Types. Consulte o Guia do TypeScript sobre como usar os tipos que começam com V5.
Obrigado a todos que contribuíram para este projeto. Tem sido um passeio selvagem.
Se você gosta de React Select, você deve me seguir no Twitter!
Grite para Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn e a equipe do Sistema de Design Atlassiano que, juntamente com muitos outros contribuidores, tornaram este possível ❤️
MIT licenciado. Copyright (C) Jed Watson 2022.
