Formik中如何使用react-select

这篇文章将为大家详细讲解有关Formik中如何使用react-select，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是一家集网站建设,安宁企业网站建设,安宁品牌网站建设,网站定制,安宁网站建设报价,网络营销,网络优化,安宁网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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 (
    
      
        Email
      
      
      {errors.email &&
      touched.email && (
        
          {errors.email}