防止输入提交表单的例子，在我的情况下，它是一个谷歌地图位置自动完成输入

<input
  ref={addressInputRef}
  type="text"
  name="event[location]"
  className="w-full"
  defaultValue={location}
  onChange={(value) => setLocation(value)}
  onKeyDown={(e) => {
    if (e.code === "Enter") {
      e.preventDefault()
    }
  }}
/>

防止输入提交表单的例子，在我的情况下，它是一个谷歌地图位置自动完成输入

<input
  ref={addressInputRef}
  type="text"
  name="event[location]"
  className="w-full"
  defaultValue={location}
  onChange={(value) => setLocation(value)}
  onKeyDown={(e) => {
    if (e.code === "Enter") {
      e.preventDefault()
    }
  }}
/>

在表单控件(input)中按Enter通常会触发表单上的submit (onSubmit)事件。考虑到你可以这样处理它(如果你只有一个输入，提交按钮是可选的):

const { useState } = React; function App() { const [text, setText] = useState(""); const [submitted, setSubmitted] = useState(''); function handleChange(e) { setText(e.target.value); } function handleSubmit(e) { e.preventDefault(); setSubmitted(text); setText(""); } return ( <div> <form onSubmit={handleSubmit}> <input type="text" value={text} onChange={handleChange} /> <input type="submit" value="add" /> </form> submitted: {submitted} </div> ); } ReactDOM.render(<App/>, document.getElementById('root')); <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <div id="root"></div>

隐式表单提交(submit event on Enter)在以下情况下执行:

有一个提交按钮 没有提交按钮，但只有一个输入

这里有更多。

或者，你可以将你的处理程序绑定到焦点被移除时发生的输入上的blur (onBlur)事件(例如，标签到下一个可以获得焦点的元素)。

根据React Doc，你可以监听键盘事件，比如onKeyPress或onKeyUp，而不是onChange。

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

更新:使用React。组件

下面是使用React的代码。组件，它做同样的事情

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

这是jsfiddle。

更新2:使用功能组件

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

下面是使用基于类的组件的一个常见用例:父组件提供一个回调函数，子组件呈现输入框，当用户按Enter键时，我们将用户的输入传递给父组件。

class ParentComponent extends React.Component {
  processInput(value) {
    alert('Parent got the input: '+value);
  }

  render() {
    return (
      <div>
        <ChildComponent handleInput={(value) => this.processInput(value)} />
      </div>
    )
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  handleKeyDown(e) {
    if (e.key === 'Enter') {
      this.props.handleInput(e.target.value);
    }
  }

  render() {
    return (
      <div>
        <input onKeyDown={this.handleKeyDown} />
      </div>
    )
  }      
}

我更喜欢onKeyUp，因为它只在键被释放时才会触发。另一方面，如果用户出于某种原因按下并按住键，onKeyDown将触发多次。例如，当监听“按下”Enter键发出网络请求时，您不希望多次触发该请求，因为代价可能很高。

// handler could be passed as a prop
<input type="text" onKeyUp={handleKeyPress} />

handleKeyPress(e) {
  if (e.key === 'Enter') {
    // do whatever
  }
}

另外，不要使用keyCode，因为它有时会被弃用。