'e' 是数字字段中唯一可接受的字母，因为它允许使用指数。您可以使用，input type="text"但它不会为您提供浏览器的原生向上和向下箭头type="number"。并且该pattern属性在提交时进行验证，但不会阻止某人首先输入“e”。在 REACT 中，您可以使用它来完全阻止在数字输入中键入“e”键：

<input type="number" onKeyDown={ (evt) => evt.key === 'e' && evt.preventDefault() } />

这是我使用的最佳验证。任何不是我们在replace方法中删除的数字的符号。输入类型需要是文本。在其他情况下，它可能会意外地工作。

  const [val, setVal] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={val}
        onChange={e => setVal(e.target.value.replace(/[^0-9]/g, ""))}
      />
    </div>
  );

代码沙盒演示。

如果您不擅长正则表达式，则可以使用第二个变体。

const [symbolsArr] = useState(["e", "E", "+", "-", "."]);
  return (
    <div className="App">
      <input
        type="number"
        onKeyDown={e => symbolsArr.includes(e.key) && e.preventDefault()}
      />
    </div>
  );

代码沙盒演示。

使用 React，您可以执行以下操作：

class Test extends React.Component {
   constructor(){
      super();
      this.state = {value: ''};
      this.onChange = this.onChange.bind(this)
   }

   onChange(e){
      const re = /^[0-9\b]+$/;
      if (e.target.value == '' || re.test(e.target.value)) {
         this.setState({value: e.target.value})
      }
   }

   render(){
     return <input value={this.state.value} onChange={this.onChange}/>
   }
}

React.render(<Test />, document.getElementById('container'));

这里是小提琴。

这是一个非常强大的解决方案，可以防止出现不是数字的字符（“e”、“.”、“+”和“-”）！

import React, { Component } from "react";

class MyComponent extends React.Component {
   state = { numInput: "" };

   handleChange = (e) => {
      this.setState({ [e.target.name]: e.target.value });
   }

   formatInput = (e) => {
     // Prevent characters that are not numbers ("e", ".", "+" & "-") ✨
     let checkIfNum;
     if (e.key !== undefined) {
       // Check if it's a "e", ".", "+" or "-"
       checkIfNum = e.key === "e" || e.key === "." || e.key === "+" || e.key === "-" ;
     }
     else if (e.keyCode !== undefined) {
       // Check if it's a "e" (69), "." (190), "+" (187) or "-" (189)
       checkIfNum = e.keyCode === 69 || e.keyCode === 190 || e.keyCode === 187 || e.keyCode === 189;
     }
     return checkIfNum && e.preventDefault();
   }

   render(){
     return (
       <input 
         name="numInput" 
         value={ this.state.value } 
         onChange={ this.handleChange }
         onKeyDown={ this.formatInput }  // this is where the magic happen ✨
       />
   }
}

export default MyComponent;

处理此问题的最佳方法是onKeyDown在用户使用键盘输入字符时使用prop（纯 html 中的 onkeydown）检查 keyCode。如果事件的 keyCode 是 69（对于 'e'）或 190（对于 '.'），那么您可以preventDefault()阻止显示输入。

<input
   type="number"
   onKeyDown={ e => ( e.keyCode === 69 || e.keyCode === 190 ) && e.preventDefault() }
/>