我试图从输入中排除减号和加号，但它出错了：
handleChange(event) {
const value = event.target.value.replace(/\+|-/ig, '');
this.setState({financialGoal: value});
}
渲染输入代码：
<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>
我试图模仿你的代码，并注意到React with <input type='number' />. 如需解决方法，请查看此示例并自行尝试：https : //codepen.io/zvona/pen/WjpKJX?editors=0010
您需要将其定义为普通输入（type='text'），仅使用数字模式：
<input type="text" pattern="[0-9]*"
onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />
然后比较输入的有效性：
const financialGoal = (evt.target.validity.valid) ?
evt.target.value : this.state.financialGoal;
这种方法的最大警告是当涉及到移动时 --> 键盘不是数字而是正常的字母格式。
一行代码
<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>
在 React 中的简单方式
<input
onKeyPress={(event) => {
if (!/[0-9]/.test(event.key)) {
event.preventDefault();
}
}}
/>
如果您想保持输入type='number'（可能用于移动设备触发数字键盘），您应该使用onInput而不是onChange捕获您的事件更改。
使用onInput修复了一个错误，即在数字输入中输入文本会绕过我在onChange. 一旦我修复了要在onInput其中调用的此函数，它就会在所有情况下触发。
这是我正在做的一个例子：
<input
type='number'
id={`player${index}Score`}
className='form-control'
pattern='[0-9]{0,5}'
onInput={(event) => this.enterScore(event, index)}
value={this.props.scoreLabel(this.state.scores[index])}
/>
我希望这有帮助！
我想出了一个更好的解决方案。在输入组件本身中使用 type='tel' 和模式正则表达式。
我如何连接它的螺母和螺栓在这里：
class Input extends React.Component {
state = {message: '3'};
updateNumber = (e) => {
const val = e.target.value;
// If the current value passes the validity test then apply that to state
if (e.target.validity.valid) this.setState({message: e.target.value});
// If the current val is just the negation sign, or it's been provided an empty string,
// then apply that value to state - we still have to validate this input before processing
// it to some other component or data structure, but it frees up our input the way a user
// would expect to interact with this component
else if (val === '' || val === '-') this.setState({message: val});
}
render() {
return (
<input
type='tel'
value={this.state.message}
onChange={this.updateNumber}
pattern="^-?[0-9]\d*\.?\d*$"
/>
);
}
}
ReactDOM.render(<Input />, document.getElementById('main'));
要停止输入，请使用onKeyPressnot onChange。
使用event.preventDefault()insideonKeyPress意味着停止按下事件。
由于keyPress之前触发处理程序onChange，您必须检查按下的键 ( event.keyCode)，而不是输入 ( event.target.value)的当前值
onKeyPress(event) {
const keyCode = event.keyCode || event.which;
const keyValue = String.fromCharCode(keyCode);
if (/\+|-/.test(keyValue))
event.preventDefault();
}