React-Select 使用

学习资料
react-select github
v2 - display icon in selected option
Github React-Select Demo： Mokaffe/react-tutorial

React-Select 介绍

React-Select 是 Select Component for React.js.
可在 react-select.com 网站看在线demo和使用文档。

It represents a whole new approach to developing powerful React.js components that just work out of the box, while being extremely customizable.

现在是React-Select Version 2 版本，它代表了一种开发功能强大的React.js组件的全新方法，这些组件只需开箱即用，同时具有极高的可定制性。

See our upgrade guide for a breakdown on how to upgrade from v1 to v2.
The old docs and examples will continue to be available at v1.react-select.com.

如果之前是使用react-select v1 版本，可以查看upgrade guide去进行升级v2操作，v1版本的文档和例子在 v1.react-select.com.

React-Select 的一些特色：

Improvements include:

Flexible approach to data, with customisable functions

Extensible styling API with emotion

Component Injection API for complete control over the UI behaviour

Controllable state props and modular architecture

Long-requested features like option groups, portal support, animation, and more

React-Select 使用

一些常用的props

autoFocus - focus the control when it mounts（这个props是boolean 值，当react-select组件mount后，自动选中到select 输入框中）
className - apply a className to the control
classNamePrefix - apply classNames to inner elements with the given prefix( This is useful when styling via CSS classes instead of the Styles API approach.)
isDisabled - disable the control
isMulti - allow the user to select multiple values
isSearchable- allow the user to search for matching options
name - generate an HTML input with this name, containing the current value （会在select组件下面生成一个hide的input，input里面的value是当前select选中的值）
onChange - subscribe to change events
options - specify the options the user can select from
placeholder - change the text displayed when no option is selected
value - control the current value

参考docs props documentation 获取更多的信息。

上诉常见的props的效果图

`autoFocus ` 效果图.png

className.png

classNamePrefix.png

name.png

onChange.png

Controllable Props（可控制的props)

You can control the following props by providing values for them. If you don't, react-select will manage them for you.（你可以通过为它们提供值去控制下面这些props，如果不这样做，react-select 将帮你管理它们。）

value / onChange - specify the current value of the control

menuIsOpen / onMenuOpen / onMenuClose - control whether the menu is open

inputValue / onInputChange - control the value of the search input (changing this will update the available options)

Question:

Control 是react-select 中的哪个组件？
menu 是react-select 中的哪个组件？
search input 是react-select 中的哪个组件？
这些问题可以在参考文档replaceable component architecture部分找到答案，但是你想特别明确的知道这些是哪个部分，需要自己一一验证。或者可以使用classNamePrefix这个props，可以去审查元素，能够知道react-select中组件的分层。

If you don't provide these props, you can set the initial value of the state they control:(如果你没有提供这些props，你可以设置这些props掌控的状态的初始值)

defaultValue - set the initial value of the control

defaultMenuIsOpen - set the initial open value of the menu

defaultInputValue - set the initial value of the search input