当值被删除时，react styled-componens 输入值变为 Non

Question

我有一个 RangeSlider 和另一个输入绑定到它，问题是当有人从滑块下的输入中清空（删除）值时，滑块变为白色并且值变为非，如所附屏幕截图所示

你可以查看演示

有什么帮助吗？

Answer 1

演示：https ://codesandbox.io/s/optimistic-khayyam-3g8sv?file=/src/Slider.js   ? !isNaN(value) ? value : 'no value'   : value >= 1000 ? `$${(value / 1000).toFixed(2)}k` : `$${value}`}

Answer 2

你有这条线inputs[i].data = parseInt(e.target.value);– 如果该值不可解析为整数，则您会得到NaN.您必须决定在这种情况下该怎么做；一个简单的解决方案是利用 s 为假的事实来替换零NaN：inputs[i].data = parseInt(e.target.value) || 0;

Answer 3

我认为问题出在你的 onChange 函数上！你不加区别地使用 parseInt，如果给定一个非数字值，parseInt 可以返回 NaN！另外，你的 onChange 有点奇怪，当它运行时（在任何输入更改上），它会在每次输入发生更改时检查每个输入。除非您希望它们有某种联系，否则这是不必要的。您可以在 onChange 中为它们提供索引，以便在您的状态中访问它们，然后在 onChange 函数中使用它。就像这样。const onChange = (event, index) => {...etcinputs[index].data = parseInt(e.target.value);// fix your NaN problem around here...etc}渲染你的组件：{data.map((item, i) => {&nbsp; &nbsp; &nbsp; const bgcolor = RangeSliderColors(item.name);&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: "flex",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flexDirection: "column",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginTop: "100px"&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <RangeSlider&nbsp; &nbsp; &nbsp; &nbsp; name={item.name}&nbsp; &nbsp; &nbsp; &nbsp; value={item.data}&nbsp; &nbsp; &nbsp; &nbsp; width={20}&nbsp; &nbsp; &nbsp; &nbsp; min={0}&nbsp; &nbsp; &nbsp; &nbsp; minValue={10}&nbsp; &nbsp; &nbsp; &nbsp; step={item.data > item.min ? 1 : item.min}&nbsp; &nbsp; &nbsp; &nbsp; max={100}&nbsp; &nbsp; &nbsp; &nbsp; bgcolor={bgcolor}&nbsp; &nbsp; &nbsp; &nbsp; onChange={() => onChange(i)} // This will let you know which one is changed.&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; );})}