input 只能输入数字，限定输入
string.replace(/[^d]/g, '')，把字符串内非数字的字符替换成空字符
/[^d]/g是正则表达式，全局匹配非数字字符
1 onkeyup事件
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const e = React.createElement;
const custom = () => {
return <input placeholder="请输入"
onKeyUp={e => e.target.value = e.target.value.replace(/[^d]/g, '')} />
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(custom), domContainer);
</script>
</html>
如果把onkeyup换成onkeydown或onkeypress，是达不到效果的，虽然onkeyup的效果也不是很好
2 onchange配合value
onkeyup事件本质上就是在键盘松开的时候改变input内的值，那直接用onchange和value不就可以了。
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const e = React.createElement;
const custom = () => {
const [number, setNumber] = React.useState()
return <input placeholder="请输入" value={number}
onChange={e => setNumber(e.target.value.replace(/[^d]/g, ''))} />
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(custom), domContainer);
</script>
</html>
动图上可能看不出来，其实我在输入’2’之后疯狂摁字母键
3 限定输入规则（正则表达）
只能输入数字string.replace(/[D]/g, ''))
只能输入数字、英文string.replace(/[^A-Za-z0-9]/g, ''))
只能输入数字、英文、下斜杠string.replace(/[W]/g, ''))
只能输入数字、小数点(不是小数，可以有多个小数点)string.replace(/[^0-9.]/g, ''))