有什么方法可以与formik重复使用MUI AutoComplete？

Question

我有一个MUI自动完成组件。我正在尝试使用添加formik验证的表单重复使用此自动完成组件。 我的自动完成组件是，

const CustomAutoCompleteField = props => {
    const {rerenderAutocomplete, data, refetchCategoryData, autoCompleteFieldsData, inputLabel, autoCompleteFieldsInputOnChange , onTouch, onErrors,fieldProps, onBlur} = props
    const [textFieldData, setTextFieldData] = useState(null)
    const onChangeHandler = (event, value) =>{


    }
  
    return (
        <>
         
            <Autocomplete
                key={rerenderAutocomplete}
                // value={onEdit && data}
                isOptionEqualToValue={(option, value) => option.name === value.name}
                onBlur={onBlur}
                onChange={onChangeHandler}
                fullWidth
                id="tags-outlined"
                options={autoCompleteFieldsData ? autoCompleteFieldsData : top100Films }
                getOptionLabel={(option) => option.name}
                filterSelectedOptions
                renderInput={(params) => (<TextField
                    required
                    {...params}
                    label={inputLabel}
                    onChange={textFieldInputOnChange}
                    error={Boolean(onTouch && onErrors)}
                    helperText={onTouch && onErrors}
                    {...fieldProps}
                />)}
            />
        </>
    );
};

在这里，我将formik属性传递给了侧面道具，这些属性是OnTouch，OnErrors，fieldprops，onblur。

在我的父组件中，我通过提供道具来使用此自动完成字段，这是

  <CustomAutoCompleteField inputLabel='Select Category'
                                                     onBlur={addNewServiceFormik.handleBlur}
                                                     onTouch={addNewServiceFormik.touched.selectedCategoryName}
                                                     onErrors={addNewServiceFormik.errors.selectedCategoryName}
                                                     fieldProps={addNewServiceFormik.getFieldProps('selectedCategoryName')}
                            />

我不知道为什么，当我单击表单上的提交时，此自动完成量不会按照Formik验证显示任何助手文本。

Answer 1

我只是简单地为此创建了一个组件

，您必须通过formikprovider与form> formikcontext一起使用

import { TextField } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import { useFormikContext } from 'formik';
import React from 'react';


type OptionsValues = {
  title: string,
  value: string
}

type Props = {
  id: string,
  name: string,
  label: string,
  options: OptionsValues[]
}

function MuiltSelect(props: Props) {
  const { options, name, label, id } = props

  const formik = useFormikContext();

  return (
    <Autocomplete
      {...props}
      multiple
      options={options}
      getOptionLabel={(option: any) => option.title}
      onChange={(_, value) => formik.setFieldValue(name, value)}
      filterSelectedOptions
      isOptionEqualToValue={(item: any, current: any) => item.value === current.value}
      renderInput={(params) => (
        <TextField
          {...params}
          id={id}
          name={name}
          label={label}
          variant={"outlined"}
          onChange={formik.handleChange}
          error={formik.touched[name] && Boolean(formik.errors[name])}
          helperText={formik.errors[name]}
          value={formik.values[name]}
          fullWidth
        />
      )
      }
    />
  )
}


export default MuiltSelect

检查GIST

https://gist.github.com/wellers0n/wellers0n/d5dffb1263ae0fed5046e46e45c47a7a7a7c4c4a7 c47c4c4a7