React MUI：实现动态创建的按钮仅禁用对应TextField的方案

这问题我之前也碰到过！核心原因是你现在所有的输入对共用了同一个全局disabled状态，所以点任何一个按钮都会触发全局状态切换，导致所有TextField一起变灰。给你两种靠谱的解决思路：

方案一：让每个输入对组件独立维护状态 #

最直接的方式是把CreateInputPair改成一个拥有自己内部状态的独立组件，这样每个输入对实例都有专属的disabled状态，互不干扰。修改后的代码如下：

export default function FAQ() {
  // 将CreateInputPair改为独立组件，内部维护自身的禁用状态
  const CreateInputPair = () => {
    const [disabled, toggleDisabled] = React.useState(false);
    
    return (
      <>
        <TextField disabled={disabled} />
        <Button onClick={() => toggleDisabled(!disabled)}>
          Toggle Disabled
        </Button>
      </>
    );
  };

  return (
    <>
      <CreateInputPair />
      <br />
      <CreateInputPair />
    </>
  );
}

这样每个输入对组件都自己管理禁用状态，点击按钮只会切换当前组件内的状态，自然就只影响对应的TextField了。这完全符合React的组件封装思想，每个组件对自己的UI和状态负责。

方案二：父组件统一管理所有输入对的状态 #

如果后续你需要批量操作这些输入对（比如动态添加/删除、统一获取所有输入的状态），可以在父组件用数组来维护每个输入对的状态，给每个项分配唯一ID来区分：

export default function FAQ() {
  // 用数组存储所有输入对的状态，每个项包含唯一ID和禁用状态
  const [inputPairs, setInputPairs] = React.useState([
    { id: 1, disabled: false },
    { id: 2, disabled: false }
  ]);

  // 根据ID切换对应输入对的禁用状态
  const toggleDisabled = (targetId) => {
    setInputPairs(prevPairs => 
      prevPairs.map(pair => 
        pair.id === targetId ? { ...pair, disabled: !pair.disabled } : pair
      )
    );
  };

  return (
    <>
      {inputPairs.map(pair => (
        <React.Fragment key={pair.id}>
          <TextField disabled={pair.disabled} />
          <Button onClick={() => toggleDisabled(pair.id)}>
            Toggle Disabled
          </Button>
          <br />
        </React.Fragment>
      ))}
    </>
  );
}

这个方案里，父组件通过数组控制所有输入对的状态，按钮点击时传入对应项的ID，在状态更新函数里精准修改目标项的禁用状态。以后如果要动态添加输入对，只需要往inputPairs数组里push新的对象即可。

另外提一句：你之前用document.getElementById操作DOM的方式确实不符合React的数据流原则，React推荐通过状态驱动UI，也就是用状态来控制组件的属性（比如这里的disabled），而不是直接操作DOM元素。上面两种方案都是遵循这个原则的，不需要手动去操作DOM就能实现需求。

备注：内容来源于stack exchange，提问作者Benjamin Luo