您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Formik中如何使用react-select,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
React-Select是github上一個極其火的控件庫,星數(shù)達(dá)到13004,它是React開發(fā)中幾乎是你必需打交道的一個內(nèi)容。React Select的基本功能實(shí)現(xiàn)的是一個表單中的常見的下拉列表框控件,其實(shí)它的功能擴(kuò)展來看遠(yuǎn)遠(yuǎn)不止如此,它支持:
等等。
但是,如果在你的開發(fā)中使用的是一個很基礎(chǔ)性的下拉列表框,那么你可以直接使用類似于Semantic UI或者是Material React控件庫的Select組件,甚至是最基本的HTML5組件中的那個。
值得注意的是,如如今react-select組件從1.0升級到2.0,變化了巨大變化。有關(guān)細(xì)節(jié)請參考官方網(wǎng)站,總起來看越升級越容易使用,功能也越強(qiáng)大。
Formik官方也提供了一個使用react-select組件的基本例子,但是使用的是react-select組件的Ver 1.x。在1.x版本時期,組件的樣式是使用css方案定義的,但是升級到2.0后,樣式使用了更為先進(jìn)且更迎合React開發(fā)思想的Emotion這個開源庫(使用JSX組件思想——CSS-in-JS——開發(fā)樣式)。由于Formik官方提供的相關(guān)實(shí)例極為簡單,所以幾需要作兩處修改即可。
工程名稱: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> <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"> <h2> Using{' '} <a href="https://github.com/jaredpalmer/formik"> Formik </a>{' '} with 3rd-party input components </h2> <p> This example shows to use Formik with a 3rd-party input component. The trick is to use Formik's{' '} <code>setFieldValue</code> prop and a custom component class whenever you need a custom change handler.{' '} </p> <p> To show this off, below is a Formik-enhanced form. It has 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文件的導(dǎo)入引用,如下:
//import 'react-select/dist/react-select.css';
第二處更為簡單,只需要把<Select/>組件中的屬性表達(dá)方式修改一下,即把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:'關(guān)羽'}, {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:'關(guān)羽1'}, {value:'c3',label:'關(guān)羽2'}, {value:'c4',label:'關(guān)羽3'}, {value:'c5',label:'張飛'} ] export default function AnimatedMulti() { return ( <Select closeMenuOnSelect={false} components={makeAnimated()} defaultValue={[colourOptions[4], colourOptions[5]]} isMulti options={colourOptions} /> ); }
關(guān)于“Formik中如何使用react-select”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。