Как установить максимально и минимальное значение для Input type number React/JSX?
Дело в том что в теге number я указал значения для min и для max. Если изменять число стрелками, то все ок , но если вводить число с клавиатуры, то можно свободно ввести число меньше минимального значения и больше максимального.
<input type="number" placeholder="LVL" className="text-area-minimal" min="0" max="999"></input>
Ответы (1 шт):
Автор решения: Randall
→ Ссылка
Если не поленюсь то добавлю и второй вариант.
export default function App() {
const [val, setVal] = useState(0);
const setNumber = ({ target }) => {
let { value, min, max } = target;
value = Math.max(Number(min), Math.min(Number(max), Number(value)));
setVal(value);
};
return (
<div className="App">
<input type="number" onChange={setNumber} value={val} min="0" max="10" />
<h2>Start editing to see some magic happen!</h2>
</div>
);
}