ReactJS TypeScript MUI TextField结合useState与onChange实现值修改

你遇到的核心问题是react-hook-form的状态管理与useState冲突——react-hook-form会接管表单字段的value和onChange逻辑，直接用useState修改值会被它的内部状态覆盖，导致无效。下面提供两种可行的解决方案，均基于react-hook-form原生API实现：

方案一：用register自定义onChange逻辑 #

适合简单场景，直接通过register的配置项处理输入替换：

import { useForm } from "react-hook-form";
import TextField from "@mui/material/TextField";

export default function AudioForm() {
  const { register, handleSubmit } = useForm({
    defaultValues: { audioFile: "" } // 初始化表单默认值
  });

  const onSubmit = (data: { audioFile: string }) => {
    console.log("提交的数据:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        label="音频文件路径"
        variant="outlined"
        fullWidth
        margin="normal"
        {...register("audioFile", {
          onChange: (e) => {
            const inputVal = e.target.value.trim();
            // 输入"auto"时替换为指定值
            const finalVal = inputVal === "auto" ? "audio.mp3" : inputVal;
            // 手动同步输入框值并触发react-hook-form的状态更新
            e.target.value = finalVal;
            e.target.dispatchEvent(new Event("input"));
          }
        })}
      />
      <button type="submit">提交</button>
    </form>
  );
}

方案二：使用Controller组件（推荐复杂场景） #

如果需要更精细控制TextField状态，Controller是react-hook-form官方推荐的受控组件包裹方式：

import { useForm, Controller } from "react-hook-form";
import TextField from "@mui/material/TextField";

export default function AudioForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: { audioFile: "" }
  });

  const onSubmit = (data: { audioFile: string }) => {
    console.log("提交的数据:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="audioFile"
        control={control}
        render={({ field: { value, onChange, ref } }) => (
          <TextField
            label="音频文件路径"
            variant="outlined"
            fullWidth
            margin="normal"
            value={value}
            inputRef={ref}
            onChange={(e) => {
              const inputVal = e.target.value.trim();
              const finalVal = inputVal === "auto" ? "audio.mp3" : inputVal;
              // 通过Controller提供的onChange直接更新表单状态
              onChange(finalVal);
            }}
          />
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

关键注意事项 #

• 禁止同时用useState和react-hook-form API控制同一个字段，两者状态管理会互相干扰，导致值不更新。
• 方案一中的dispatchEvent(new Event("input"))是为了让react-hook-form感知到值变化，否则表单内部状态不会同步。
• 方案二的Controller会完全接管TextField的value和onChange，更适合需要自定义逻辑的复杂受控场景。

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