日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章將為大家詳細講解有關(guān)Formik中如何使用react-select，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),安寧企業(yè)網(wǎng)站建設(shè),安寧品牌網(wǎng)站建設(shè),網(wǎng)站定制,安寧網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,安寧網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

react-select簡介

React-Select是github上一個極其火的控件庫，星數(shù)達到13004，它是React開發(fā)中幾乎是你必需打交道的一個內(nèi)容。React Select的基本功能實現(xiàn)的是一個表單中的常見的下拉列表框控件，其實它的功能擴展來看遠遠不止如此，它支持：

• 多選

• 樣式定制

• 多級聯(lián)動選擇

• 異步加載

  等等。
  但是，如果在你的開發(fā)中使用的是一個很基礎(chǔ)性的下拉列表框，那么你可以直接使用類似于Semantic UI或者是Material React控件庫的Select組件，甚至是最基本的HTML5組件中的那個。

值得注意的是，如如今react-select組件從1.0升級到2.0，變化了巨大變化。有關(guān)細節(jié)請參考官方網(wǎng)站，總起來看越升級越容易使用，功能也越強大。

在Formik中使用react-select組件

Formik官方也提供了一個使用react-select組件的基本例子，但是使用的是react-select組件的Ver 1.x。在1.x版本時期，組件的樣式是使用css方案定義的，但是升級到2.0后，樣式使用了更為先進且更迎合React開發(fā)思想的Emotion這個開源庫（使用JSX組件思想——CSS-in-JS——開發(fā)樣式）。由于Formik官方提供的相關(guān)實例極為簡單，所以幾需要作兩處修改即可。
工程名稱：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}