反应工具箱输入组件未验证字符

Question

>我正在使用 react-toolbox 组件输入，类型="tel">

如何防止组件不接受字母等无效字符？

我希望它只接受数字。输入的电话号码只能是有效的电话号码，包括国际格式。

---

下面是一个示例代码

<Input type="Type"
label="Mobile number"
name="newUserMobileNo"
value={this.state.newUserMobileNo}
className="input mobileno"
onChange={this.newUserMobileNoChanged}
error={this.state.noNewUserMobileNo}
theme={theme} />

Answer 1

在onChange函数(newUserMobileNoChanged(中，检查event.target.value与数字正则表达式(/^[0-9\b]+$/(，如果它有效，则设置状态为"newUserMobileNo"，否则不。

<Input type="Type"
label="Mobile number"
name="newUserMobileNo"
value={this.state.newUserMobileNo}
className="input mobileno"
onChange={this.newUserMobileNoChanged}
error={this.state.noNewUserMobileNo}
theme={theme} />