点击事件反应JS重新加载页面

Question

我有一个按钮的ButtonActor.js：

import React from 'react';
import '../../css/index.css';
import '../../css/App.css';
import '../../css/bootstrap.min.css';
import '../../css/font-awesome.css';
import '../../css/floating-labels.css';
import Home from "../view/Home";
import { Route,  BrowserRouter as Router } from 'react-router-dom'
class ButtonActor extends React.Component {
    isPrimaryButton;
    hLink;

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log("clicked");
    }


    render() {
        if(this.props.isPrimaryButton==="true")
        {
            return (
                <div>
                    <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">
                        {this.props.name}
                    </button>
                </div>
            );
        }
        else
        {
            return (
                <div>
                    <button className="btn btn-sm btn-secondary btn-block btn-animated" type="submit" onClick={this.handleClick}>
                        {this.props.name}
                    </button>
                </div>
            );
        }
    }
}
export default ButtonActor;

并将这段代码放在Login.js中：

  <div className="row justify-content-start">
                      <form className="form-signin">
                          <ButtonActor name="Don't Have An Account?" isPrimaryButton="false">
                          </ButtonActor>
                      </form>
                  </div>

每当我点击按钮时，这个页面就会重新加载当前页面，并在末尾加上一个?标记。

我怎样才能解决这个问题？

重新加载时，我甚至看不出它是否正在控制台中打印。

Answer 1

通常在您的情况下不需要插入form标记，此错误与此相关，当您单击带有submit类型的按钮时，它将提交表单，并重新加载页面，但是如果需要使用此标记并修复此错误，则需要添加onSubmit eventListener到form标记。

  <div className="row justify-content-start">
       <form className="form-signin" onSubmit={(event) => event.preventDefault()}>
            <ButtonActor name="Don't Have An Account?" isPrimaryButton={false}>
            </ButtonActor>
       </form>
  </div>

最好将isPrimaryButton支柱设置为布尔道具，并按以下方式编辑您的ButtonActor.js：

render() {
        if(this.props.isPrimaryButton===true)
        {
            return (
                <div>
                    <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">
                        {this.props.name}
                    </button>
                </div>
            );
        }
        else
        {
            return (
                <div>
                    <button className="btn btn-sm btn-secondary btn-block btn-animated" type="submit" onClick={this.handleClick}>
                        {this.props.name}
                    </button>
                </div>
            );
        }
    }