React中数字输入框无法输入负号的问题求助

先给你指出代码里的几个明显错误，这些会直接导致状态更新异常：

• 接口Range的属性是小写min/max，但你定义的defaultState和状态更新用的是大写Min/Max，属性名不匹配，状态根本更新不了
• 输入框的value绑定了Range.Min，应该是你定义的状态变量stateRange.Min（修正属性名后是stateRange.min）
• 状态更新函数用了setCustomYAxisRange，但你实际定义的是setRange，函数名不匹配

接下来是核心问题的解决：当type="number"的输入框被清空后，valueAsNumber会变成NaN，如果直接把NaN赋值给状态，浏览器会把输入框的值重置为空，导致你没法输入负号开头的负数。解决思路是允许状态存储中间输入状态（比如单独的'-'），避免输入框因为NaN被强制清空。

修正后的完整代码：

interface Range {
  min: number | string; // 允许字符串存储中间输入状态
  max: number | string;
}

const defaultState: Range = {
  min: -1,
  max: 0,
};

const [stateRange, setRange] = React.useState<Range>(defaultState);

<Form.Group
  key="min"
  className="mb-3"
>
  <Form.Label>Y-min</Form.Label>
  <Form.Control
    type='number'
    disabled={!enableCustomAxis}
    min={-40}
    max={30}
    step={1}
    value={stateRange.min !== undefined && !isNaN(Number(stateRange.min)) ? stateRange.min : ''}
    onChange={(event) => {
      const inputValue = event.target.value;
      // 处理空输入
      if (inputValue === '') {
        setRange(prev => ({ ...prev, min: '' }));
        return;
      }
      // 允许输入单独的负号作为中间状态
      if (inputValue === '-') {
        setRange(prev => ({ ...prev, min: '-' }));
        return;
      }
      // 转换为数字并验证范围
      const num = Number(inputValue);
      if (!isNaN(num) && num >= -40 && num <= 30) {
        setRange(prev => ({ ...prev, min: num }));
      }
    }}  
    required          
    placeholder='Enter minimum value of Y-coordinate'
  />
</Form.Group>

关键说明： #

1. 把状态的min/max改成number | string联合类型，允许存储像'-'这样的中间输入值，避免输入框因为NaN被强制清空
2. value属性做了判断：只有当值是有效数字时才显示数字，否则显示空字符串，确保输入框能正常响应你的输入操作
3. onChange里分情况处理：空输入、单独负号输入、有效数字输入，既保留了数字输入框的原生特性，又解决了负号输入的问题

如果你不想修改状态类型，也可以在提交表单或需要使用数值的时候再做转换验证，核心都是避免让输入框的value变成NaN。

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