如何仅在按键“enter”提交时运行函数-react js

kuarbcqp 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(315)

我可以理解，如果标题有点混乱，我不知道如何命名这个。
我有一个按钮，当点击它时，会运行一个名为 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 方法。

JavaScript Html reactjs page-refresh enter

来源：https://stackoverflow.com/questions/68338409/how-to-only-run-function-when-button-is-submitted-with-key-enter-react-js

1条答案

按热度按时间

rjjhvcjd1#

最简单的方法是使用 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>

赞(0）回复(0）举报 2021-09-13

我来回答

如何仅在按键“enter”提交时运行函数-react js

1条答案

相关问题

热门标签

最新问答