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 following
import * 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 demo
import './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><inputid="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>)}<MySelectvalue={values.topics}onChange={setFieldValue}onBlur={setFieldTouched}error={errors.topics}touched={touched.topics}/><buttontype="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.topcisthis.props.onChange('topics', value);};handleBlur = () => {// this is going to call setFieldTouched and manually update touched.topcisthis.props.onBlur('topics', true);};render() {return (<div style={{ margin: '1rem 0' }}><label htmlFor="color">Topics (select at least 3){' '}</label><Selectid="color"options={options}isMultionChange={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 href="https://github.com/jaredpalmer/formik">Formik</a>{' '}with 3rd-party input components</h1><p>This example shows to use Formik with a 3rd-partyinput component. The trick is to use Formik's{' '}<code>setFieldValue</code> prop and a custom componentclass whenever you need a custom change handler.{' '}</p><p>To show this off, below is a Formik-enhanced form. Ithas a "vanilla" Formik input for <code>email</code>{' '}and a custom select component for <code>topics</code>{' '}that uses Jed Watson's {' '}<a href="https://github.com/JedWatson/react-select">react-select</a>{' '}library.</p><MyEnhancedForm /><hr/><SimpleSelect/><hr/><AnimatedMulti/><hr/><MoreResources /></div>
);render(<App />, document.getElementById('root'));

第一处修改是屏蔽css文件的导入引用，如下：
//import 'react-select/dist/react-select.css';
第二处更为简单，只需要把<Select/>组件中的属性表达方式修改一下，即把multi={true}修改为isMulti就可以了，如下：

        <Selectid="color"options={options}isMultionChange={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 (<SelectcloseMenuOnSelect={false}components={makeAnimated()}defaultValue={[colourOptions[4], colourOptions[5]]}isMultioptions={colourOptions}/>);
}

引用

1，https://react-select.com/home#getting-started
2，https://blog.csdn.net/Tony1590112/article/details/78296345
3，https://github.com/emotion-js/emotion
4，https://github.com/jaredpalmer/formik