使用TypeScript、React Hook Form等提交表单时遇只读属性赋值错误求助

1. 用Controller适配Fluent UI TextField #

Fluent UI的TextField组件value属性为只读，不能直接通过register绑定，必须用react-hook-form的Controller组件做状态桥接，示例代码：

import { Controller, useForm } from 'react-hook-form';
import { TextField } from '@fluentui/react-components';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const formSchema = yup.object().shape({
  email: yup.string().email('格式错误').required('必填'),
});

export function LoginForm() {
  const { control, handleSubmit } = useForm({
    resolver: yupResolver(formSchema),
  });

  const submitHandler = (formData) => {
    // 处理提交逻辑
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit(submitHandler)}>
      <Controller
        name="email"
        control={control}
        render={({ field }) => (
          <TextField label="邮箱" {...field} />
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

2. 禁止直接操作DOM或组件value属性 #

检查代码中是否存在以下错误写法：

• 手动给TextField设置value并自行维护状态，和react-hook-form的状态管理冲突
• 提交时直接通过DOM API修改input的value（比如document.getElementById('xxx').value = ''）

这类操作会触发只读属性报错，重置表单请用react-hook-form提供的reset方法：

const { control, handleSubmit, reset } = useForm(...);

const submitHandler = (formData) => {
  // 提交完成后重置表单
  reset();
};

3. 确认版本兼容性 #

确保使用的依赖版本匹配：

• react-hook-form需为v7+
• Fluent UI需为@fluentui/react-components v9+（旧版@fluentui/react v8也可适配，但写法略有差异，同样建议用Controller）

内容的提问来源于stack exchange，提问作者Nelson Uprety