входное значение реагирует на стильные компоненты становится Не, когда значение удалено

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

Я думаю, что проблема в вашей функции 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>
  );
})}

Answer 3

У вас есть строка

inputs[i].data = parseInt(e.target.value);

- если значение не может быть проанализировано как целое число, вы получите NaN.

Вам придется решить, что делать в этом дело; простое решение - заменить ноль, используя тот факт, что NaN s являются ложными:

inputs[i].data = parseInt(e.target.value) || 0;