Сохранить тип переменной, когда я получаю значение от ввода onchange с помощью React-hooks
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)) делает тип numString
Я пытался измениться вот так onChange = {e=>setNum(parseInt(e.target.value))}.
но, когда я ввел white-space, возникает ошибка.
Warning: Received NaN for the
valueattribute. If this is expected, cast the value to a string.
Как лучше всего сохранить тип num?
@VlatkoVlahek игнорируй это.
Извините ребята. Я только что отредактировал свой вопрос.
ребята, я переписываю фрагменты кода.
Проверка ввода необходима, если вы хотите избежать NaN. Вам нужно либо заменить NaN значением, либо полностью отменить изменение, если оно приводит к NaN. оба решения будут неудобны для пользователя, так как если значение станет недействительным, пока он вводит действительное значение, оно заменит их ввод тем, что вы ему скажете, или ничего не сделает. Возможно, вам лучше сделать этот нет контролируемым вводом.
Ответы 4
Проблема связана с тем, что 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;
он блокирует ввод white-space, я хочу сохранить номер, когда я набираю номер.
Может быть, вы дали мне большую подсказку, setNum(parseInt(e.target.value) || '')
Рад, что это привело вас в правильном направлении. Однако setNum с ' ' не должен работать, так как вы возвращаетесь к строке для числового значения.
Этот код предотвратит установку пользователем num нуля, если в настоящее время он не равен нулю. Рассмотрите возможность проверки возвращаемого parseInt значения NaN, а не ложности, поскольку возвращаемое значение 0 является ложным, но может быть допустимым пользовательским вводом.
У меня была та же проблема, и я просто обошел ее, указав, что значение ввода равно либо состоянию, либо пустой строке. таким образом, это не повлияет на состояние значения, и это будет просто пустая строка.
<input
type = "number"
onChange = {e => setNum(parseInt(e.target.value))}
value = {num || ""}
/>
при этом я также добавил проверку, чтобы убедиться, что num не останется в качестве NAN надолго.
Хорошая идея, чтобы держать его также подальше от 0.
Я решил эту проблему, проверив значение NaN.
<input
type = "number"
onChange = {e => {
Object.is(NaN, parseInt(e.target.value))
?setNum(e.target.value)
:setNum(parseInt(e.target.value))
}
}
value = {num}
/>
Вместо использования parseInt() вы также можете использовать Number(), где пустое пространство будет автоматически преобразовано в 0.
Если поле ввода пустое, используйте defaultValue вместо value
так
const { useState } = React;
const App = () => {
const [num, setNum] = useState(0);
//changes made below
return (
<input type = "number" defaultValue = {num} onChange = {(e)=>setNum(Number(e.target.value))} />
)
}
ReactDOM.render(<App />, document.getElementById('root'));
Однако в вашем случае значение по умолчанию равно 0, потому что это начальное значение num
Вы можете изменить его на это const [num, setNum] = useState('');
Примечание. Это будет работать только для всех чисел, включая десятичные дроби.
у вас синтаксическая ошибка.
onChange = {...}. У вас нормальный () вместо {}