Как проверить элементы управления Forms для использования только числовых значений с реагировать на загрузку

Question

Мне нужно разрешить вводить только числовые значения в моем Form.Control с помощьюact-bootstrap.Кроме того, мне нужно указать максимальную длину для элемента управления.

Я попытался использовать type = "number" и maxLength = "10", но это позволяет мне вводить более 10 цифр, и по умолчаниюстиль, который применяется к элементу управления с двумя стрелками, чтобы увеличить или уменьшить число, которое я не хочу.

<Form> 
<Form.Group>
<Form.Control
    className="mobileBox"
    required
    name="mobile"
    type="number"
    maxLength="10"
    value={props.mobile}
    onChange={props.onChange}
/>
</Form.Group>
</Form>

Answer 1

Вы можете убрать прокручиваемые блоки для увеличения и уменьшения числа, добавив этот стиль CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}