一。组件库Material UI
1.1 地址
https://v4.mui.com/zh/getting-started/installation/
1.2 简介
自称世界上最受欢迎的React UI组件库(能看到这里的基本用法应该都清楚了,我就不重复了)
二。效果展示
三。代码展示
import React from 'react'
import { useField, useFormikContext } from 'formik'
import { TextField as MuiTextField } from '@material-ui/core'
import { Autocomplete } from '@material-ui/lab'
const MuitipleSelectFields = (props) => {
const {
name,
style,
size,
limitTags,
disabled = false,
option = [],
...otherProps } = props
const [field, meta, helpers] = useField('')
// useField(这里面应该是name,但是我使用name,
// value的值会是null,导致出错 如果有懂的可以一起探讨)
const { isSubmitting, setFieldValue } = useFormikContext()
return (
< Autocomplete
value={field.value}
style={style}
limitTags={limitTags} // 显示的最大的标签数
mulTiple={true} // 如果为true 就支持多个选项
// 如果为true 选择一项就不会关闭弹窗
disableCloseOnSelect={true}
disabled={disabled} // 是否禁用
noOptionsText="无匹配选项"
size="samll"
option={option} // 选择数组
onChange={(e, i, r) => {
setFieldValue(name, i, true)
}}
getOptionSelected={(option, value) => {
return option.value === value.value
}}
onBlur={() => helpers.setTouched({ [naem]: true })}
// 用于确定给选项的字符串值,它用于填充输入
getOptionLable={({ text }) => text}
renderInput={(params) => { // 呈现输入
<MuiTextField
{...params}
{...otherProps}
// 如果为true 输入框将显示错位状态
error={meta.touched && !!meta.error}
// 辅助文本内容
helperText={meta.touched && !!meta.error ? meta.error : null}
variant="outlined" //想要使用的变体
/>
}}
/>)
}
export default MuitipleSelectFields