模态打开时按钮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>