Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use react-select in Formik. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Introduction to react-select

React-Select is a very popular control library on github, with 13004 stars, and it is almost something you have to deal with in React development. The basic function of React Select implements a drop-down list box control that is common in a form. In fact, its function extension is much more than that, it supports:

Multi-selection style customization multi-level linkage selection asynchronous loading

Wait.

However, if you are using a basic drop-down list box in your development, you can directly use the Select component like Semantic UI or the Material React control library, or even the most basic HTML5 component.

It is worth noting that, for example, the upgrade of react-select components from 1.0 to 2.0 has changed dramatically. For details, please refer to the official website. Generally speaking, the more upgraded you are, the easier it is to use and the more powerful it is.

Using react-select components in Formik

Formik officially also provides a basic example of using the react-select component, but uses Ver 1.x of the react-select component. In version 1.x, the style of the component was defined using the css scheme, but after upgrading to 2.0, the style used the open source library Emotion, which is more advanced and more responsive to the idea of React development (using the idea of JSX components-CSS-in-JS-- development style). Because the relevant examples provided by the official Formik are extremely simple, there are several changes that need to be made.

Project name: formik-09x-react-select-example, main document: index.js

The complete code after modification is as follows:

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 requests'), 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})} Reset Submit);} 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 (Topics (select at least 3) {''} {! this.props.error & & this.props.touched & & ({this.props.error})});}} const MyEnhancedForm = formikEnhancer (MyForm) Const App = () = > (Using {'} Formik {'} with 3rd-party input components

This example shows to use Formik with a 3rd-party input component. The trick is to use Formik's {'} setFieldValue prop and a custom component class whenever you need a custom change handler. {''}

To show this off, below is a Formik-enhanced form. It has a "vanilla" Formik input for email {'} and a custom select component for topics {'} that uses Jed Watson's {'} react-select {''} library.

); render (, document.getElementById ('root'))

The first modification is to mask the import reference of the css file, as follows:

/ / import 'react-select/dist/react-select.css'

The second is more simple, you just need to change the property expression in the component, that is, change multi= {true} to isMulti, as follows:

In addition, two react-select components, SimpleSelect and AnimationMultiSelect, have been added by myself. Their respective source codes are as follows. Please refer to:

/ / SimpleSelect.js

Import React, {Component} from 'react'import Select from' react-select'const options= [{value:'liu',label:' Liu Bei'}, {value:'guan',label:' Guan Yu'}, {value:'zhang',label:' Zhang Fei'}] const SimpleSelect= () = > () 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:' Liu Bei'}, {value:'c2',label:' Guan Yu 1'}, {value:'c3',label:' Guan Yu 2'}, {value:'c4',label:' Guan Yu 3'}, {value:'c5',label:' Zhang Fei'}] export default function AnimatedMulti () {return () } this is the end of the article on "how to use react-select in Formik". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.