javascript - 如何仅在使用 key "Enter"提交按钮时运行功能 - React Js

Question

原谅愚蠢的标题:)
我有一个按钮，单击它会运行一个名为 restart 的函数它只是重置一个状态。我想让这个按钮易于访问，所以当您按下选项卡时，按钮会突出显示，提示您按 Enter 或单击它。
基本代码

class Home extends Component{
  restart(){
    this.setState({popup:false,finished:true,started:false,userInput:""})
  }
  render(){
    return(
      <div>
        <button className="btn btn-dark buttons" onClick={this.restart.bind(this)}>Restart</button>
      </div>
    )
  }

如果您单击按钮，一切正常，但按下 Enter ，页面被重新加载，这是非常有害的。
当使用 Enter 提交按钮时，我如何能够禁用此重新加载？键，仍然调用 restart方法。

Answer 1

最简单的方法是使用 form并调用您的restart onSubmit 上的方法事件。这样，键盘用户也可以访问它。不要忘记调用 event.preventDefault() 不重新加载页面。
查看下面的演示:

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = { popup: true, finished: false, started: true, userInput: '' };
    this.restart = this.restart.bind(this);
  }

  restart(e) {
    // make sure you don't reload the page
    e.preventDefault();

    this.setState({
      popup: false,
      finished: true,
      started: false,
      userInput: '',
    });
  }
  render() {
    return (
      <form onSubmit={this.restart}>
        <button className="btn btn-dark buttons" type="submit">
          Restart
        </button>
        <pre>
          {JSON.stringify(this.state, null, 2)}
        </pre>
      </form>
    );
  }
}

ReactDOM.render(<Home />, 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>