reactjs - 如何通过 react-bootstrap 验证表单控件以仅使用数值

Question

我只需要使用 react-bootstrap 在我的 Form.Control 中输入数值。另外，我需要给控件一个最大长度。

我试过使用 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; 
}