如何在使用键 "Enter" 提交按钮时仅 运行 起作用 - React Js

Question

请原谅愚蠢的标题:)

我有一个按钮，单击它会运行一个名为 restart 的函数，该函数只是重置状态。我想让这个按钮易于访问，所以当您按下选项卡时，该按钮会突出显示，提示您按回车键或单击它。

基本代码

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 并在 onSubmit 事件上调用您的 restart 方法。这样键盘用户也可以访问它。不要忘记调用 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>