сохранить тип переменной, когда я получаю значение из ввода onchange с помощью React-хуков - PullRequest
Новая
       15

сохранить тип переменной, когда я получаю значение из ввода onchange с помощью React-хуков

0 голосов
/ 30 мая 2019 

const { useState } = React;

const App = () => {
  const [num, setNum] = useState(0);
  
  return (
    <input type="number" value={num} onChange={(e)=>setNum(parseInt(e.target.value))} />
  )
}

ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

Я хочу сохранить тип num как Number, а не String.

но onChange=(e=>setNum(e.target.value)) делает тип num String

Я пытался измениться так onChange={e=>setNum(parseInt(e.target.value))}.

но при вводе white-space возникает ошибка.

Предупреждение. Получено NaN для атрибута value. Если это ожидается, приведите значение к строке.

Какой лучший способ сохранить тип num?

1 Ответ

0 голосов
/ 30 мая 2019

Проблема связана с тем, что parseInt может сломаться.

В случае, если вы не можете успешно проанализировать ваше «строковое» входное значение, вы получите ошибку. Вы можете добавить запасной вариант к текущему значению или сбросить до 0 или избежать вызова setNum в случае сбоя вашего parseInt. 

import React, { useState } from 'react';

const App: React.FC = () => {
  const [num, setNum] = useState(0);

  return (
    <input
      type="number"
      onChange={e => setNum(parseInt(e.target.value) || num)}
    />
  );
};

export default App;
...