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

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

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

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

Pliny

创建、分享和重新组合AI应用程序

下载

✅ 正确做法：使用 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 (
    <div>
      <form>
        <div>
          <h4>Selecione a opção que melhor te define:</h4>
          <select defaultValue="" onChange={(e) => showOptions(e.target.value)}>
            <option value="">— Selecione —</option>
            <option value="PF">Pessoa Física</option>
            <option value="PJ">Pessoa Jurídica</option>
          </select>

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

          <button type="submit">Enviar</button>
        </div>
      </form>
    </div>
  );
}

? 关键要点说明：

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

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