如何在React Hook Form中实现输入框初始禁用与动态启用

算力阿峰

2026-7-15

解决方案

核心问题是你直接使用了原始JSON的disabled属性，无法动态更新。要实现动态禁用/启用，需要把表单配置存入React状态，通过修改状态触发组件重渲染。

实现步骤

将原始JSON配置存入React状态，方便后续修改
用useEffect设置定时器，5秒后更新指定字段的disabled状态
渲染表单时，使用状态中的配置来绑定disabled属性

完整代码示例

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";

const json = [
  {
    type: "input",
    name: "firstName",
    label: "First Name",
    disabled: true
  },
  {
    type: "input",
    name: "lastName",
    label: "Last Name",
    disabled: true
  }
];

export default function App() {
  const { register, handleSubmit } = useForm();
  // 将JSON配置转为可修改的状态
  const [formFields, setFormFields] = useState(json);

  // 5秒后启用firstName字段
  useEffect(() => {
    const enableTimer = setTimeout(() => {
      setFormFields(prevFields => 
        prevFields.map(field => 
          field.name === "firstName" ? { ...field, disabled: false } : field
        )
      );
    }, 5000);

    // 清理定时器，避免内存泄漏
    return () => clearTimeout(enableTimer);
  }, []);

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {formFields.map(field => (
        <div key={field.name} style={{ margin: "10px 0" }}>
          <label>{field.label}</label>
          <br />
          <input
            {...register(field.name)}
            disabled={field.disabled}
            style={{ padding: "4px" }}
          />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
}