如何将React Hook形式与React Mui Select组合组合？

Question

使用包含React MUI组件的React Hook形式的形式，尤其是Select component。

（

Playground）

import { zodResolver } from '@hookform/resolvers/zod';
import {
  Button,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from '@mui/material';
import { type SubmitHandler, useForm } from 'react-hook-form';
import { z } from 'zod';

function App() {
  const formFieldsSchema = z.object({
    selected: z.enum(['foo', 'bar', 'baz']),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<z.infer<typeof formFieldsSchema>>({
    resolver: zodResolver(formFieldsSchema),
    defaultValues: {
      selected: 'bar',
    },
  });

  const onSubmit: SubmitHandler<z.infer<typeof formFieldsSchema>> = (data) =>
    console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormControl fullWidth error={errors.selected !== undefined}>
        <InputLabel>Selected</InputLabel>
        <Select {...register('selected')}>
          {['foo', 'bar', 'baz'].map((option) => (
            <MenuItem key={option} value={option}>
              {option}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>{errors.selected?.message}</FormHelperText>
      </FormControl>
      <Button type="submit">Submit</Button>
    </form>
  );
}

预期的行为：

选择组件应使用选定的值“ bar”渲染。选择其他值时，应更新其状态。

实际行为：

当渲染组件时，我会得到警告

Mui：您提供了一个范围的值

undefined

选择（name =“ Selected”）组件。考虑提供一个值 匹配可用选项之一或“”。可用的值是

foo

，

bar

，

baz

（我的猜测是

register

函数无法将当前值传递给选择的组件，尽管该支柱简单地为

value

）

当选择其他值时，我会得到错误

A组件正在更改要控制的不受控制的输入。这 可能是由从未定义变为定义的价值变化引起的 价值，不应该发生。在使用受控或 组件寿命的不受控制的输入元素。

有人知道如何解决这个问题？

仅使用'Watch'

Answer 1

将值应用于选择

<Select {...register('selected')} value={watch('selected')}> 

import { zodResolver } from '@hookform/resolvers/zod';
import {
  Button,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from '@mui/material';
import { type SubmitHandler, useForm } from 'react-hook-form';
import { z } from 'zod';

function App() {
  const formFieldsSchema = z.object({
    selected: z.enum(['foo', 'bar', 'baz']),
  });

  const {
    watch,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<z.infer<typeof formFieldsSchema>>({
    resolver: zodResolver(formFieldsSchema),
    defaultValues: {
      selected: 'bar',
    },
  });

  const onSubmit: SubmitHandler<z.infer<typeof formFieldsSchema>> = (data) =>
    console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormControl fullWidth error={errors.selected !== undefined}>
        <InputLabel>Selected</InputLabel>
        <Select {...register('selected')} value={watch('selected')}>
          {['foo', 'bar', 'baz'].map((option) => (
            <MenuItem key={option} value={option}>
              {option}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>{errors.selected?.message}</FormHelperText>
      </FormControl>
      <Button type="submit">Submit</Button>
    </form>
  );
}

export default App;