react-select简介

React-Select是github上一个极其火的控件库，星数达到13004，它是React开发中几乎是你必需打交道的一个内容。React Select的基本功能实现的是一个表单中的常见的下拉列表框控件，其实它的功能扩展来看远远不止如此，它支持：

• 多选

• 样式定制

• 多级联动选择

• 异步加载

  等等。
  但是，如果在你的开发中使用的是一个很基础性的下拉列表框，那么你可以直接使用类似于Semantic UI或者是Material React控件库的Select组件，甚至是最基本的HTML5组件中的那个。

值得注意的是，如如今react-select组件从1.0升级到2.0，变化了巨大变化。有关细节请参考官方网站，总起来看越升级越容易使用，功能也越强大。

在Formik中使用react-select组件

Formik官方也提供了一个使用react-select组件的基本例子，但是使用的是react-select组件的Ver 1.x。在1.x版本时期，组件的样式是使用css方案定义的，但是升级到2.0后，样式使用了更为先进且更迎合React开发思想的Emotion这个开源库（使用JSX组件思想——CSS-in-JS——开发样式）。由于Formik官方提供的相关实例极为简单，所以几需要作两处修改即可。
工程名称：formik-09x-react-select-example，主要文件：index.js
修改后完整代码如下：

import './formik-demo.css';import React from 'react';import { render } from 'react-dom';import { withFormik } from 'formik';//ERROR NOW: import Yup from 'yup';==>changed into the followingimport * as Yup from 'yup';import Select from 'react-select';//NOT SUPPORTED IN VERSION 2.X.// Styles are now implemented with css-in-js rather than less / scss stylesheets//import 'react-select/dist/react-select.css';// Helper styles for demoimport './formik-demo.css';import {    MoreResources,    DisplayFormikState,} from './formik-helper';import SimpleSelect from './SimpleSelect'import AnimatedMulti from './AnimationMultiSelect'const formikEnhancer = withFormik({    mapPropsToValues: props => ({        email: '',        topics: []    }),    validationSchema: Yup.object().shape({        email: Yup.string()            .email('Invalid email address')            .required('Email is required!'),        topics: Yup.array()            .min(3, 'Pick at least 3 tags')            .of(                Yup.object().shape({                    label: Yup.string().required(),                    value: Yup.string().required(),                })            ),    }),    handleSubmit: (values, { setSubmitting }) => {        const payload = {            ...values,            topics: values.topics.map(t => t.value),        };        setTimeout(() => {            alert(JSON.stringify(payload, null, 2));            setSubmitting(false);        }, 1000);    },    displayName: 'MyForm'});const MyForm = props => {  const {    values,    touched,    dirty,    errors,    handleChange,    handleBlur,    handleSubmit,    handleReset,    setFieldValue,    setFieldTouched,    isSubmitting,  } = props;  return (    <form onSubmit={handleSubmit}>      <label htmlFor="email" style={{ display: 'block' }}>        Email      </label>      <input        id="email"        placeholder="Enter your email"        type="email"        value={values.email}        onChange={handleChange}        onBlur={handleBlur}      />      {errors.email &&      touched.email && (        <div style={{ color: 'red', marginTop: '.5rem' }}>          {errors.email}        </div>      )}      <MySelect        value={values.topics}        onChange={setFieldValue}        onBlur={setFieldTouched}        error={errors.topics}        touched={touched.topics}      />      <button        type="button"        className="outline"        onClick={handleReset}        disabled={!dirty || isSubmitting}      >        Reset      </button>      <button type="submit" disabled={isSubmitting}>        Submit      </button>      <DisplayFormikState {...props} />    </form>  );};const options = [  { value: 'Food', label: 'Food' },  { value: 'Being Fabulous', label: 'Being Fabulous' },  { value: 'Ken Wheeler', label: 'Ken Wheeler' },  { value: 'ReasonML', label: 'ReasonML' },  { value: 'Unicorns', label: 'Unicorns' },  { value: 'Kittens', label: 'Kittens' },];class MySelect extends React.Component {  handleChange = value => {    // this is going to call setFieldValue and manually update values.topcis    this.props.onChange('topics', value);  };  handleBlur = () => {    // this is going to call setFieldTouched and manually update touched.topcis    this.props.onBlur('topics', true);  };  render() {    return (      <div style={{ margin: '1rem 0' }}>        <label htmlFor="color">          Topics (select at least 3){' '}        </label>        <Select          id="color"          options={options}          isMulti          onChange={this.handleChange}          onBlur={this.handleBlur}          value={this.props.value}        />        {!!this.props.error &&        this.props.touched && (          <div style={{ color: 'red', marginTop: '.5rem' }}>            {this.props.error}          </div>        )}      </div>    );  }}const MyEnhancedForm = formikEnhancer(MyForm);const App = () => (  <div className="app">    <h1>      Using{' '}      <a react-select/dist/react-select.css';
第二处更为简单，只需要把<Select/>组件中的属性表达方式修改一下，即把multi={true}修改为isMulti就可以了，如下：
        <Select          id="color"          options={options}          isMulti          onChange={this.handleChange}          onBlur={this.handleBlur}          value={this.props.value}        />
另外还添加了两个我自己加入的react-select组件，分别是SimpleSelect和AnimationMultiSelect，它们各自的源码如下，请参考：
//SimpleSelect.js
import React,{Component} from 'react'import Select from 'react-select'const options=[    {value:'liu',label:'刘备'},    {value:'guan',label:'关羽'},    {value:'zhang',label:'张飞'}]const SimpleSelect=()=>(    <Select options={options}/>)export default SimpleSelect
//AnimationMultiSelect
import React from 'react';import Select from 'react-select';import makeAnimated from 'react-select/lib/animated';// import { colourOptions } from '../data';const colourOptions=[    {value:'c1',label:'刘备'},    {value:'c2',label:'关羽1'},    {value:'c3',label:'关羽2'},    {value:'c4',label:'关羽3'},    {value:'c5',label:'张飞'}]export default function AnimatedMulti() {    return (        <Select            closeMenuOnSelect={false}            components={makeAnimated()}            defaultValue={[colourOptions[4], colourOptions[5]]}            isMulti            options={colourOptions}        />    );}