Как сделать ограничения на вводимые символы в input в react.js?

@eryn.rodriguez 

В React.js можно сделать ограничения на вводимые символы, используя событие onChange и функцию валидации. Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import React, { useState } from "react";

function InputWithRestrictions({ type, value, onChange }) {
  const [inputValue, setInputValue] = useState(value);

  function handleInputChange(event) {
    const { value } = event.target;
    if (type === "number") {
      if (!isNaN(value)) {
        setInputValue(value);
        onChange(event);
      }
    } else if (type === "text") {
      setInputValue(value);
      onChange(event);
    }
  }

  return <input type={type} value={inputValue} onChange={handleInputChange} />;
}

export default InputWithRestrictions;

В этом примере мы создаем компонент InputWithRestrictions, который принимает тип type и значение value в качестве параметров. Затем мы используем хук useState для хранения значения inputValue, которое является текущим значением введенных данных пользователем. В обработчике события onChange мы проверяем тип вводимых данных, и если это число, используем функцию isNaN для проверки, является ли введенное значение числом. Если это текст, мы просто обновляем значение inputValue и вызыв

@eryn.rodriguez 

аем функцию onChange, передавая событие. Возвращаемый JSX содержит input со значением inputValue и обработчиком onChange, который вызывает функцию handleInputChange.

Пример использования:

1 2 3 4 5

function App() { function handleChange(event) { console.log(event.target.value); }

return ( ); }

export default App;