如何让min/max输入框支持空值或0-5范围内的数字？

要实现输入框支持空值或0-5范围内的数字，需要调整状态类型、数值处理逻辑以及输入框的value绑定方式，具体修改如下：

1. 调整原子状态的类型 #

首先确保你的numberPiecesMin和numberPiecesMax原子支持空值（null）类型，比如：

import { atom } from 'jotai';

const numberPiecesMin = atom<number | null>(null); // 初始值设为null表示未输入
const numberPiecesMax = atom<number | null>(null);

2. 重构数值处理函数 #

修改numberWithMinMaxDefaultValue函数，让它在输入为空时返回null而非默认数值，同时保留范围校验逻辑：

const numberWithMinMaxDefaultValue = (
  value: number | string,
  minValue: number,
  maxValue: number,
): number | null => {
  // 空字符串直接返回null，允许输入框清空
  if (value === '') {
    return null;
  }

  const res = typeof value === 'number' ? value : parseFloat(value);

  // 非有效数字返回null，清空输入框
  if (isNaN(res)) {
    return null;
  }

  // 将数值限制在0-5范围内
  return Math.max(minValue, Math.min(maxValue, res));
};

3. 更新状态设置函数 #

移除原函数中的defaultValue参数，因为现在空值直接返回null：

const setNumberPiecesMin = (value: number | string) => {
  setFiltresMin(numberWithMinMaxDefaultValue(value, minValue, maxValue));
};

const setNumberPiecesMax = (value: number | string) => {
  setFiltresMax(numberWithMinMaxDefaultValue(value, minValue, maxValue));
};

4. 调整输入框的value绑定 #

将状态值转换为字符串，当状态为null时显示空字符串，确保输入框能正常清空：

return (
  <div className="hk-flex hk-flex-row hk-gap-1.5">
    <InputFloatingLabel
      label="min"
      value={filtresMin != null ? filtresMin.toString() : ''}
      onChange={setNumberPiecesMin}
      inputProps={{ type: 'text' }}
    />
    <InputFloatingLabel
      label="max"
      value={filtresMax != null ? filtresMax.toString() : ''}
      onChange={setNumberPiecesMax}
      inputProps={{ type: 'text' }}
    />
  </div>
);

修改说明 #

• 原代码中输入框清空时自动设为0，是因为numberWithMinMaxDefaultValue在遇到空字符串时返回了defaultValue（minValue=0），现在改为返回null，让状态支持空值。
• 输入框的value属性需要做类型转换：当状态为null时显示空字符串，当状态为数字时转为字符串展示，保证输入框的显示与用户操作一致。
• 保留了0-5的范围校验：输入超出范围的数字会被自动截断到范围内，输入非数字内容时输入框会清空。

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