模式打开时触发按钮 onClick

Question

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

来自渲染的模态结构：

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 Whosebug" + 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>

模式打开时触发按钮 onClick

Button onClick triggering when modal opens

javascript

modal-dialog

reactjs