Question

我想通过点击DetailAboutUs按钮进入AboutUs页面。我该怎么办？

这是我的代码。

render(){
    var buttonStyle;
    return(
        <div>

           <button
               className="btn btn-default"
            style={buttonStyle}
               onClick={this.props.clickHandler(DetailAboutUs)}>About Us

           </button>

        </div>
    )

Answer 1

您可以在状态组件中具有标志，该标志可以跟踪点击事件，例如isButtonClicked = false。

说您想通过名称 DetailAboutUs （它是一个组件）来加载页面。

代码看起来像这样。

isButtonClickedHandler = () => {
   this.setState({isButtonClicked = true});
}

render(){
    var buttonStyle;
    var detailAboutUs = this.state.isButtonClicked == true ? <DetailAboutUs> 
                        </DetailAboutUs> : null;

    return(
        <div>

           <button
               className="btn btn-default"
                style={buttonStyle}
                 onClick={this.isButtonClickedHandler()}>About Us

           </button>
          {detailAboutUs} //This will load only after the button click//

        </div>
    )

如何通过单击reactjs中的按钮来加载另一个网页？

1 个答案: