反应.JS 如何允许在输入中仅键入数字'onKeyPress'

Question

我正在开发我的ReactJS新网站，我希望输入只允许用户键入手机号码的数字。

onlyNumberKey = (event) => {
let ASCIICode = event.which ? event.which : event.keyCode;
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) 
return false;
return true;
};
<div>
<input type='text' onKeyPress='return {this.onlyNumberKey}' />
</div>

我使用"；onlyNumberKey"我在我为我的问题发现的许多网站上找到了函数
此函数正在工作，并且将根据需要返回true或false，
但是我可能不明白，如何防止用户插入字母和特殊字符？

这不起作用，并产生错误-

onKeyPress='return this.onlyNumberKey' 

"Warning: Expected onKeyPress listener to be a function, instead got a value of string type."
我知道为什么，只是为了澄清我尝试了很多解决方案。

感谢您的帮助

Answer 1

您可以过滤掉更改处理程序中不需要的字符：

class Test extends React.Component {
constructor(){
super();
this.state = {
input: ''
};
}
onChangeHandler(e){
this.setState({
input: e.target.value.replace(/D/g,'')
});
}
render (){
return (
<input value={this.state.input} type="text" onChange={this.onChangeHandler.bind(this)}/>
);
}
}
ReactDOM.render(
<Test />,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

像往常一样验证不是更好吗？

const {useState} = React;
const r = /^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/
const PhoneInput=() => {
const [value,setValue]=useState(null);
const [validated,setValidated]=useState(false);

const onChange=(e)=>{
e.preventDefault();
let v = e.target.value;
setValidated(!!v.match(r));
};
return (
<fieldset>
<input
type="text"
value={value}
onChange={onChange}
></input>
<button disabled={!validated}>
Send
</button>
</fieldset>
);
};
ReactDOM.render(<PhoneInput />,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>