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

Question

我的应用程序中有一个带有按钮的模式。该按钮触发一个函数，该函数使用 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)
    }

Answer 1

您需要将 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>