React中通过ID控制动态数量Input的disabled属性是否为最佳实践？

这个方法其实并不推荐，也不属于React的最佳实践，核心原因在于它违背了React的设计理念，同时会给性能和代码维护埋下隐患。下面具体分析，并给出更优的解决方案：

为什么直接用document.getElementById不合适？ #

• 破坏React的声明式范式：React的核心是通过状态描述UI，状态与UI保持同步。如果你手动通过DOM操作修改disabled属性，会导致状态和实际UI脱节——比如后续组件重新渲染时，React会根据当前状态覆盖你手动修改的DOM值，或者状态未更新导致UI状态混乱，出现难以排查的bug。
• 性能与维护性问题：虽然getElementById本身执行很快，但当输入框数量增加时，你需要手动维护每个ID对应的DOM操作逻辑，代码会变得零散且易出错（比如新增/删除输入框时，容易遗漏对应的DOM操作）。同时，绕开React的虚拟DOM diff机制，可能引发不必要的DOM重复操作，反而影响性能。
• 代码整洁性下降：大量的document.getElementById调用会让业务逻辑和DOM操作混杂在一起，组件的可读性和可维护性会大幅降低。

更优方案：用状态管理动态输入框的disabled状态 #

对于数量不固定的输入框，推荐用对象或Map类型的状态来存储每个输入框的disabled状态，键为输入框的唯一标识（比如你原本打算用的title-12这类ID），值为布尔型的disabled状态。这种方式完全符合React的声明式理念，同时兼顾性能和代码整洁性。

示例代码如下：

import { useState } from 'react';

function DynamicInputList() {
  // 用对象存储每个输入框的disabled状态，键为输入框唯一ID
  const [disabledStates, setDisabledStates] = useState({});

  // 切换指定输入框的禁用状态
  const toggleInputDisabled = (inputId) => {
    setDisabledStates(prevState => ({
      ...prevState,
      [inputId]: !prevState[inputId]
    }));
  };

  // 模拟动态生成的输入框列表（实际可从接口或父组件传入）
  const inputItems = [
    { id: 'title-12', placeholder: '输入标题12' },
    { id: 'title-13', placeholder: '输入标题13' },
    { id: 'title-14', placeholder: '输入标题14' },
    // ... 任意数量的输入框
  ];

  return (
    <div className="input-list">
      {inputItems.map(item => (
        <div key={item.id} className="input-item">
          <input
            id={item.id}
            type="text"
            placeholder={item.placeholder}
            // 直接从状态中取对应输入框的disabled值，默认false
            disabled={disabledStates[item.id] || false}
          />
          <button onClick={() => toggleInputDisabled(item.id)}>
            {disabledStates[item.id] ? '启用' : '禁用'}
          </button>
        </div>
      ))}
    </div>
  );
}

这种方案的优势 #

• 状态与UI完全同步：所有输入框的disabled状态都由React状态管理，不会出现手动DOM操作导致的不一致问题。
• 性能更优：React会通过虚拟DOM diff机制高效更新UI，避免不必要的DOM操作。
• 代码可维护性强：新增/删除输入框时，只需修改数据源（比如inputItems数组），状态逻辑会自动适配，无需额外处理DOM操作。

特殊场景下的替代方案：useRef #

如果确实需要直接访问DOM（比如某些第三方库集成场景），React提供的useRef钩子比document.getElementById更合适——它是React官方推荐的DOM引用方式，能避免时序问题（比如组件未挂载时无法获取DOM）。但对于批量动态输入框，依然优先推荐状态管理的方式。

示例代码（单个输入场景）：

import { useRef } from 'react';

function SingleInputDemo() {
  const inputRef = useRef(null);

  const disableInput = () => {
    if (inputRef.current) {
      inputRef.current.disabled = true;
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={disableInput}>禁用输入框</button>
    </div>
  );
}

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