如何在下拉框选中特定选项时，为数字输入框添加最小值限制？

要实现仅当下拉框选中特定选项（比如minutes）时数字输入框才生效最小值限制，你可以通过动态绑定input的min属性来实现，核心是根据下拉框的当前值判断是否启用限制：

1. 修改数字输入框的min属性 #

把原来固定的min='5'改成动态判断的表达式，根据parameterForm.durationType的值决定是否设置最小值：

<input
  type="number"
  className="HeroParameterFeedNumberInputLarge"
  name="durationAmount"
  // 仅选中minutes时设置min为5，其他情况不添加min属性
  min={parameterForm.durationType === 'minutes' ? 5 : undefined}
  value={parameterForm.durationAmount}
  onChange={handleParameterChange}
/>

<select
  className="HeroParameterDropdownInput"
  name="durationType"
  value={parameterForm.durationType}
  onChange={handleParameterChange}
>
  <option value="minutes">minutes</option>
  <option value="hours">hours</option>
  <option value="days">days</option>
</select>

2. 补充逻辑验证（可选但推荐） #

原生min属性只是前端UI层面的约束，用户可能通过修改DOM绕过限制，建议在表单提交或输入变化时添加逻辑验证：

比如在提交函数或handleParameterChange中加入：

// 示例：提交时的验证逻辑
const handleSubmit = () => {
  if (parameterForm.durationType === 'minutes' && parameterForm.durationAmount < 5) {
    alert('分钟数不能小于5');
    return;
  }
  // 执行后续提交逻辑
};

这样既能实现UI层面的动态限制，也能保证业务逻辑的严谨性。

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