3 回答

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個(gè)贊
演示: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貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊
你有這條線
inputs[i].data = parseInt(e.target.value);
– 如果該值不可解析為整數(shù),則您會(huì)得到NaN
.
您必須決定在這種情況下該怎么做;一個(gè)簡(jiǎn)單的解決方案是利用 s 為假的事實(shí)來(lái)替換零NaN
:
inputs[i].data = parseInt(e.target.value) || 0;

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
我認(rèn)為問(wèn)題出在你的 onChange 函數(shù)上!你不加區(qū)別地使用 parseInt,如果給定一個(gè)非數(shù)字值,parseInt 可以返回 NaN!另外,你的 onChange 有點(diǎn)奇怪,當(dāng)它運(yùn)行時(shí)(在任何輸入更改上),它會(huì)在每次輸入發(fā)生更改時(shí)檢查每個(gè)輸入。除非您希望它們有某種聯(lián)系,否則這是不必要的。您可以在 onChange 中為它們提供索引,以便在您的狀態(tài)中訪問(wèn)它們,然后在 onChange 函數(shù)中使用它。就像這樣。
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 關(guān)注
- 237 瀏覽
添加回答
舉報(bào)