时间戳

首页 > 解决方案 > 模态打开时按钮 onClick 触发

javascript - 模态打开时按钮 onClick 触发

问题描述

我的应用程序中有一个带有按钮的模式。该按钮触发一个函数，该函数使用 window.open() 在新窗口中打开一个链接。我的问题是，当打开模式时，它会触发此功能并打开一个新选项卡。我怎样才能防止这种情况

来自渲染的模态结构：

if(this.props.displayModal){
            return(
                <div className="modBackdrop">
                    <div className="modal-fade" aria-hidden="true" role="dialog" tabIndex="-1" id="companyModal">
                        <div className="modal-dialog" role="document"> 
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h3 className="modal-title">{readyForDisplay.fields.Company_Name}</h3>
                                    <button type="button" className="close" onClick={this.onModalClick}>
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div className="modal-body">
                                    {this.constructModalBody(readyForDisplay)}
                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-primary" onClick={this.feedbackLink(readyForDisplay.fields.Company_Name)} id="feedbackButton">Update Profile</button>
                                    <button type="button" className="btn btn-success ml-auto" style={{backgroundColor: '#07d585'}} onClick={this.onModalClick}>Close</button>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
            );
        }else{
            return(null);
        }

onClick调用的函数：

feedbackLink(prefill){


        let link = "removed for StackOverflow" + prefill
        window.open(link)
    }

标签： javascriptreactjsmodal-dialog

解决方案

您需要onClick作为对函数的引用传递，您不应该调用函数onClick

你可以通过onClick两种方式

<button onClick={this.handleClick}>Click Me!</button>

或者

<button onClick={(event) => this.handleClick()}>Click Me!</button>

您是直接调用 onClick 函数，必须将其更改为

<button type="button" className="btn btn-primary" onClick={() => {this.feedbackLink(readyForDisplay.fields.Company_Name)}} id="feedbackButton">Update Profile</button>

推荐阅读