有什么方法可以重复使用带有 formik 的 mui 自动完成功能吗？

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}
                />)}
            />
        </>
    );
};

在这里，我在 onTouch、onErrors、fieldProps、onBlur 等辅助道具中传递 formik 属性。

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

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

我不知道为什么，当我在我的表单上单击提交时，此自动完成不会根据 formik 验证显示任何帮助文本。

Answer 1

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

在表单中，您必须通过FormikProvider才能与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

检查要点

https://gist.github.com/Wellers0n/d5dffb1263ae0fed5046e45c47a7c4a7