我有一個 RangeSlider 和另一個輸入綁定到它，問題是當有人從滑塊下的輸入中清空（刪除）值時，滑塊變為白色并且值變為非，如所附屏幕截圖所示你可以查看演示有什么幫助嗎？
3 回答
ITMISS
TA貢獻1871條經驗 獲得超8個贊
演示：https ://codesandbox.io/s/optimistic-khayyam-3g8sv?file=/src/Slider.js
? !isNaN(value) ? value : 'no value'
: value >= 1000
? `$${(value / 1000).toFixed(2)}k`
: `$${value}`
}
蝴蝶刀刀
TA貢獻1801條經驗 獲得超8個贊
你有這條線
inputs[i].data = parseInt(e.target.value);
– 如果該值不可解析為整數，則您會得到NaN.
您必須決定在這種情況下該怎么做；一個簡單的解決方案是利用 s 為假的事實來替換零NaN：
inputs[i].data = parseInt(e.target.value) || 0;
子衿沉夜
TA貢獻1828條經驗 獲得超3個贊
我認為問題出在你的 onChange 函數上！你不加區別地使用 parseInt，如果給定一個非數字值，parseInt 可以返回 NaN！另外，你的 onChange 有點奇怪，當它運行時（在任何輸入更改上），它會在每次輸入發生更改時檢查每個輸入。除非您希望它們有某種聯系，否則這是不必要的。您可以在 onChange 中為它們提供索引，以便在您的狀態中訪問它們，然后在 onChange 函數中使用它。就像這樣。
const onChange = (event, index) => {
...etc
inputs[index].data = parseInt(e.target.value);
// fix your NaN problem around here
...etc
}
渲染你的組件：
{data.map((item, i) => {
const bgcolor = RangeSliderColors(item.name);
return (
<div
key={i}
style={{
display: "flex",
flexDirection: "column",
marginTop: "100px"
}}
>
<RangeSlider
name={item.name}
value={item.data}
width={20}
min={0}
minValue={10}
step={item.data > item.min ? 1 : item.min}
max={100}
bgcolor={bgcolor}
onChange={() => onChange(i)} // This will let you know which one is changed.
/>
</div>
);
})}
- 3 回答
- 0 關注
- 220 瀏覽
添加回答
舉報
0/150
提交
取消