使用“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 并在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>