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

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

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

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

✅ 正确做法：使用 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 控制。