如何在 React 中通过事件监听器动态更新 HTML

react 组件中直接修改普通变量无法触发视图更新；必须使用 `usestate` 管理状态，调用 setter 函数才能触发重新渲染，从而实现 html 的动态变更。

在 React 中，UI 的更新必须依赖状态（state）驱动的重新渲染，而非对普通 JavaScript 变量的赋值。你当前代码中的 let isDisabled = true 是一个局部变量，每次组件函数执行时都会重新声明，且修改它不会通知 React 触发重绘——因此即使逻辑正确，DOM 也永远不会变化。

要实现“选择 PF/PJ 后动态显示对应下拉框”的效果，需将控制条件的变量改为 React 状态，并在事件处理函数中通过 setState 更新：

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

下载

✅ 正确做法：使用 useState 管理可响应的状态

import { useState } from 'react';

export default function App() {
  const [isDisabled, setIsDisabled] = useState(true);     // 控制主下拉框是否显示
  const [isDisabledPF, setIsDisabledPF] = useState(true); // 控制显示 PF 还是 PJ 的子选项

  const showOptions = (value) => {
    if (value === 'PF') {
      setIsDisabled(false);
      setIsDisabledPF(false); // 显示 PF 相关选项（如“Fotógrafo”）
    } else if (value === 'PJ') {
      setIsDisabled(false);
      setIsDisabledPF(true);  // 显示 PJ 相关选项（如“Agência de Turismo”）
    } else {
      setIsDisabled(true);
      setIsDisabledPF(true);  // 重置：均不显示
    }
  };

  return (
    

      

        

          
Selecione a opção que melhor te define:
           showOptions(e.target.value)}>
            — Selecione —
            Pessoa Física
            Pessoa Jurídica
          

          {/* 条件渲染子下拉框 */}
          {!isDisabled && (
            
              {isDisabledPF ? (
                <>
                  — Selecione —
                  Agência de Turismo
                
              ) : (
                <>
                  — Selecione —
                  Fotógrafo
                
              )}
            
          )}

          Enviar
        
      
    
  );
}

? 关键要点说明：

• ✅ useState 返回的 setter（如 setIsDisabled）是 React 唯一认可的、能触发组件重渲染的状态更新方式；
• ✅ 不要使用 let/const 普通变量存储需要影响 UI 的值——它们不具备响应性；
• ✅ 条件渲染应基于状态值（如 !isDisabled），而非副作用逻辑；
• ✅ defaultValue 推荐设为空字符串 "" 而非 null，更符合 HTML 表单语义；
• ⚠️ 注意：表单提交默认会刷新页面，如需拦截，请为
  添加 onSubmit={(e) => e.preventDefault()}。

通过状态驱动 + 条件渲染，即可实现清晰、可预测、符合 React 哲学的动态 UI 控制。