@mui v5 Autocomplete with React Hook Form 7 不工作？

Question

我正在努力实施 React Hook Form 7。我有许多常规的 TextFields 正在工作，但是我现在运行遇到了构建自动完成组件的问题。目前，下拉切换按钮不显示，none 的选项正在下拉列表中呈现。它就像一个普通的 TextField。我看过许多其他相关的 S.O。之类的帖子，但 none 似乎解决了我的问题。

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 只是带有州名和国家名的字符串数组。控制台中没有错误。知道我在这里做错了什么吗？

Answer 1

您缺少传播 InputProps，所以基本上您是在覆盖 InputProps 的所有默认属性。

<Autocomplete /> 的 onChange 属性的函数签名略有不同。实际的value是第二个参数。查看 here 了解更多信息。

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

@mui v5 Autocomplete with React Hook Form 7 不工作？

@mui v5 Autocomplete with React Hook Form 7 not working?

reactjs

material-ui

react-hook-form