reactjs - @mui v5 带有 React Hook Form 7 的自动完成功能不起作用？

Question

我正在实施 React Hook Form 7。我有许多常规的 TextFields 工作，但是我现在遇到了构建自动完成组件的问题。目前，下拉切换按钮不显示，并且下拉列表中没有呈现任何选项。它就像一个常规的 TextField。我已经查看了许多其他相关的 SO 帖子，例如这个帖子，但似乎没有一个可以解决我的问题。

import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { validationSchema } from './validationSchema';
import { states, countries } from 'helpers';

const StepTwo: React.FC<Props> = ({ handleNextStep, handlePrevStep }) => {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(validationSchema),
    mode: 'onBlur',
    reValidateMode: 'onBlur',
    defaultValues: {
      state: null,
      country: null,
    },
  });

  return (
    <form onSubmit={handleSubmit(handleStepSubmit)} noValidate>
      <Grid item xs={12} className="text-center">
        <Controller
          control={control}
          name="state"
          render={({ field }) => (
            <Autocomplete
              {...field}
              autoComplete
              forcePopupIcon={true}
              fullWidth
              options={states}
              isOptionEqualToValue={(option, value) => option === value}
              renderInput={params => (
                <TextField
                  {...params}
                  error={!!errors?.state}
                  helperText={errors?.state?.message}
                  label="State (Optional)"
                  variant="outlined"
                  size="small"
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <LocationOnIcon
                          color={errors?.state ? 'error' : 'inherit'}
                        />
                      </InputAdornment>
                    ),
                  }}
                />
              )}
            />
          )}
        />
      </Grid>
      {/* Country Select */}
      <Grid item xs={12} className="text-center">
        <Controller
          control={control}
          name="country"
          render={({ field }) => (
            <Autocomplete
              {...field}
              fullWidth
              options={countries}
              getOptionLabel={item => item}
              isOptionEqualToValue={(option, value) => option === value}
              renderInput={(params: AutocompleteRenderInputParams) => (
                <TextField
                  {...params}
                  error={!!errors?.country}
                  helperText={errors?.country?.message}
                  label="Country (Optional)"
                  variant="outlined"
                  size="small"
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <PublicIcon
                          color={errors?.country ? 'error' : 'inherit'}
                        />
                      </InputAdornment>
                    ),
                  }}
                />
              )}
            />
          )}
        />
      </Grid>
    </form>
}

states.ts并且countries.ts只是带有州和国家名称的字符串数组。控制台中没有错误。知道我在这里做错了什么吗？

标签： reactjsmaterial-uireact-hook-form

Answer 1

您缺少InputProps传播InputProps.

onChangeprop of的函数签名<Autocomplete />略有不同。实际value是第二个参数。在这里查看更多信息。

<Controller
  control={control}
  name="country"
  render={({ field: { ref, onChange, ...field } }) => (
    <Autocomplete
      {...field}
      onChange={(e, v) => onChange(v)}
      fullWidth
      options={countries}
      isOptionEqualToValue={(option, value) => option === value}
      renderInput={(params) => (
        <TextField
          {...params}
          inputRef={ref}
          error={!!errors?.country}
          helperText={errors?.country?.message}
          label="Country (Optional)"
          variant="outlined"
          size="small"
          InputProps={{
            ...params.InputProps,
            startAdornment: (
              <InputAdornment position="start"></InputAdornment>
            )
          }}
        />
      )}
    />
  )}
/>