如何将uiw/react-codemirror作为react-hook-form表单字段使用

当然有很多开发者实现过这个需求，这是React生态里很常见的表单场景——把代码编辑器这类非原生表单控件接入React Hook Form。下面提供两种可行的实现方式：

方法一：使用Controller组件（官方推荐） #

React Hook Form的Controller组件专门用来适配非原生表单控件，CodeMirror刚好属于这类场景，步骤如下：

1. 先安装必要依赖：

npm install react-hook-form @uiw/react-codemirror

2. 编写组件代码：

import { useForm, Controller } from "react-hook-form";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";

export default function CodeMirrorForm() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      code: "// 在这里输入代码"
    }
  });

  const onSubmit = (data) => {
    console.log("表单提交数据：", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="code"
        control={control}
        rules={{ required: "代码不能为空" }}
        render={({ field: { onChange, value } }) => (
          <CodeMirror
            value={value}
            onChange={onChange}
            extensions={[javascript()]}
            height="300px"
          />
        )}
      />
      {errors.code && <p style={{ color: "red" }}>{errors.code.message}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

Controller会自动帮你处理值同步、表单验证逻辑，不用手动写额外的状态更新代码，是最省心的方案。

方法二：手动结合register方法 #

如果想直接用register，可以手动监听CodeMirror的内容变化，再调用setValue更新表单字段：

1. 同样先安装依赖，然后编写代码：

import { useForm } from "react-hook-form";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";

export default function CodeMirrorFormWithRegister() {
  const { register, handleSubmit, formState: { errors }, setValue } = useForm({
    defaultValues: {
      code: "// 在这里输入代码"
    }
  });

  // 注册表单字段
  register("code", { required: "代码不能为空" });

  const onSubmit = (data) => {
    console.log("表单提交数据：", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <CodeMirror
        value={register("code").value}
        onChange={(newValue) => {
          // 手动更新表单字段的值
          setValue("code", newValue);
        }}
        extensions={[javascript()]}
        height="300px"
      />
      {errors.code && <p style={{ color: "red" }}>{errors.code.message}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

这种方式适合需要对编辑器事件做更自定义处理的场景，比如额外的内容格式化、防抖更新等。

内容的提问来源于stack exchange，提问作者Pramodya Mendis