Как сделать так чтобы в input нельзя было вводить меньше 5?

Question

[Жалил]

У меня есть инпут где пользователь должен вводить не меньше 5 но и не больше 50, как можно реализовать это? И ещё когда я удаляю всё значение из инупта то остаётся ноль так как начальное value у него null как показано в коде

const [ amount, setAmount ] = useState(null || '');

Как это исправить?

Comments

[Вадим]

<input type="number" min="5" max="50" />

или слушатель для события input на инпут, проверять что ввели и реагировать соответствующим образом.

Answer 1

[Владимир Коротенко]

import React, { useState } from 'react';

export function App(props) {
  const [value, setValue] = useState( '');
  const [bg, setBg] = useState('red');
  const handleChange = event => {
    setValue(event.target.value);
    if(value.length < 5 || value.length>50){
      setBg('red')
    }
    else{
      setBg('')
    }
   
  };

  return (
    <div className='App'>
      <input
        type='text'
        value={value}
        onChange={handleChange}
        style={{  backgroundColor: bg}}
      />
      <pre>{value}</pre>
    </div>
  );
}

Comments

[Александр Антонов]

я может ошибаюсь но если меняешь value который в стейте то и проверять его надо уже через useEffect()

const handleChange = (e) => {
  setValue(e.target.value);
}

useEffect(() => {
  setBg((value.length < 5 || value.length > 50) ? 'red' : '')
}, [value])

Answer 2

[Александр Антонов]

Можно через событие onBlur валидировать

const Input = () => {
  const range = { min: 5, max: 50 }
  const [value, setValue] = useState<number | "">(range.min)

  function onBlurHandle(value: number) {
    if (value >= range.min && value < range.max) return;
    setValue(range.min)
  }

  return (
    <input
      type="number"
      value={value}
      onChange={({ target }) => setValue(target.value === "" ? "" : +target.value)}
      onBlur={({ target }) => onBlurHandle(+target.value)}
      min={range.min}
      max={range.max}
    />
  )
}

Answer 3

[Виталий Моржов]

Здравствуйте!
Элементу input можно добавить атрибуты:
minlength=count
maxlength=count

Пример

<input name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required>

Comments

[Владимир Коротенко]

которые работают только по сабмиту, причем если сабмит не нативный то эта проверка не работает.