ReactJS下拉框选特定值显示其他字段的问题排查

问题分析 #

你遇到的两个核心问题：

• 初始值设为null时，直接访问selectedCategory.value会因null无value属性导致渲染报错
• 设置默认值后，下拉框的required验证失效，因为默认值被视为已选中的有效选项

修复步骤 #

1. 安全访问属性避免报错
   保持useState初始值为null，在判断是否显示输入框时，使用可选链操作符(?.)安全访问value属性，或者先判断selectedCategory是否存在再访问value。

2. 保留required验证功能
   初始值设为null时，下拉框会处于未选中状态，此时required属性会正常触发表单验证，提示用户必须选择一个选项。

修改后的完整代码 #

const [selectedCategory, setSelectedCategory] = useState(null);

<div className="col-12 col-lg-12 mb-3">
  <Select 
    placeholder="Select Category..."
    id="selectCategory"
    required
    defaultValue={selectedCategory}
    onChange={setSelectedCategory}                                                
    options={serviceNames}
  />
</div>
<React.Fragment>
  <div className="col-12 col-lg-12">
    {/* 使用可选链操作符安全访问value */}
    {selectedCategory?.value === "other" && (
      <input 
        className="form-control mb-3" 
        id="serviceCategory" 
        type="text"
        placeholder="Enter Category of your Service/business" 
        name="serviceCategory" 
        onChange={(e) => setNewCategory(e.target.value)}
      />
    )}
  </div>
</React.Fragment>

补充说明 #

• 可选链操作符?.是ES2020的语法，若你的项目环境不支持，可替换为条件判断：selectedCategory && selectedCategory.value === "other"
• 注意修正输入框占位符里的拼写错误：Entery → Enter，Serivce → Service
• 若使用的是Ant Design等UI库的Select组件，确保表单验证逻辑（如Form组件）正确关联，required属性才能正常生效

内容的提问来源于stack exchange，提问作者Dinesh