当值被删除时，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) => {

...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>

  );

})}