按钮打开模式打开时单击触发

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>