Как разрешить только числа на входе в реагирующие хуки? - PullRequest
Новая
       6

Как разрешить только числа на входе в реагирующие хуки?

1 голос
/ 22 апреля 2020

Чтение этот ответ Я придумал этот код, но он не работал. Чего мне не хватает? 

function App() {
  const [value, setValue] = useState();

  function onChange(e) {
    const re = /^[0-9\b]+$/;
    if (e.target.value === "" || re.test(e.target.value)) {
      setValue(e.target.value);
    }
  }

  return <input value={value} onChange={onChange} />;
}

render(<App />, document.getElementById("root"));

1 Ответ

1 голос
/ 22 апреля 2020

Обновленный ответ в соответствии с этим сообщением

Вы можете использовать атрибуты type="number" и pattern="^-?[0-9]\d*\.?\d*$", поэтому измените ваш элемент ввода следующим образом: 

  return <input value={value}
                onChange={onChange}
                type="number"
                pattern="^-?[0-9]\d*\.?\d*$"
          />;
}

Затем примените следующие CSS правила: 

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

источник: w3shools

PS Или вы можете пропустить type=number часть и дополнительную CSS и просто использовать шаблон.

...