如何在 React 中通过下拉框选项动态显示输入框

本文讲解如何使用 react 的 usestate hook 实现：仅当用户从下拉菜单中选择“yes”时才渲染文本输入框，避免误触发（如选“no”时也显示）的常见逻辑错误。

本文讲解如何使用 react 的 usestate hook 实现：仅当用户从下拉菜单中选择“yes”时才渲染文本输入框，避免误触发（如选“no”时也显示）的常见逻辑错误。

在 React 表单开发中，条件渲染是高频需求。上述代码的问题在于：showtext 被赋值为任意非空字符串（如 "Yes" 或 "No"），而原判断 {showtext ? ... : null} 仅检查其真值性（truthiness）——由于 "No" 是非空字符串，同样为 true，因此输入框在两种情况下都会显示。

✅ 正确做法是进行严格相等比较，明确限定仅当值为字符串 "Yes" 时才渲染：

import React, { useState } from "react";function FormHooks() {  const [selectedOption, setSelectedOption] = useState(""); // 更语义化的状态名  const handleSelectChange = (e) => {    setSelectedOption(e.target.value);  };  return (    <div>      <form>        <div>          <label>Are you employed?</label>          <select value={selectedOption} onChange={handleSelectChange}>            <option value="">— Select —</option>            <option value="Yes">Yes</option>            <option value="No">No</option>          </select>        </div>        {/* ✅ 仅当选择"Yes"时显示输入框 */}        {selectedOption === "Yes" && (          <div style={{ marginTop: "12px" }}>            <label htmlFor="companyName">Company Name:</label>            <input               id="companyName"               type="text"               placeholder="Enter Company name"             />          </div>        )}      </form>    </div>  );}export default FormHooks;

? 关键改进说明：

• 使用 selectedOption === "Yes" 替代模糊的 selectedOption ? ... : null，确保逻辑精准；
• 为 <select> 添加 value 属性并绑定状态，使其成为受控组件，提升可预测性与可测试性；
• 将状态变量命名为 selectedOption（而非 showtext），增强代码可读性与维护性；
• 使用 && 短路运算符替代三元表达式（condition ? element : null），更简洁且符合 React 社区习惯；
• 为输入框添加 <label> 和 id，提升无障碍访问（a11y）支持。

⚠️ 注意事项：

• 切勿依赖 value="" 的 option 作为默认占位项后仍用 === "Yes" 判断——这是安全的，因为初始值 "" 不等于 "Yes"；
• 若后续需扩展多条件（如显示不同字段），建议使用 switch 或映射对象，避免深层嵌套；
• 在生产环境，建议配合表单库（如 React Hook Form）管理复杂条件渲染与校验逻辑。

通过这一微小但关键的逻辑修正，即可实现精准、可维护的动态表单交互。