当值为 NaN 时 html 输入滑块跳到中间

Question

我在反应应用程序中使用滑块并像这样修改

value

<input
    type="range"
    className="frame-slider"
    min="0"
    value={currentValue.toString()}
    onChange={(ev) => handleChange(parseInt(ev.target.value))}
    max={maxLength}
/>

但是当我运行

handleChange

（也由另一个数字输入控制）时，如果我得到 NaN，则滑块会跳到中间而不是 0，即 currentValue 所在的位置。

两个输入都由相同的

handleChange

控制，但输入不会受到影响，因为我猜用户在输入新内容之前会擦除内容，但滑块不断跳跃而不是停留在其最后位置。

Answer 1

如果

parseInt

的结果是

NaN

那么您可以在设置值时考虑到这一点，例如：

onChange={(ev) => handleChange(parseInt(ev.target.value) || 0)}

这会将值设置为解析后的整数，或者如果解析失败则设置为

0

。

或者，您可以允许它设置一个空值并在显示屏中检查该值：

value={(currentValue || 0).toString()}