为什么我的函数不会使用 reactjs 在弹出 window 中执行 onclick？

Question

我试图通过 onclick 事件执行一个函数，但是没有任何反应。我的目标是在单击弹出 window 中的下载按钮后触发该功能。我的目标是在单击下载按钮后触发 downloadJobs 事件。

任何解决此问题的建议都将不胜感激。

class LoadTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            Search: "Search",
            visible: false,
            sort: {
                column: null,
                direction: 'desc',
            },
        }

        this.doSearch = this.doSearch.bind(this);
        this.runLog = this.runLog.bind(this);
        this.downloadOutput = this.downloadOutput.bind(this);

    }
    componentDidMount() {
        this.props.getJobs() 
            .then((res) => {
                this.setState({
                    data: res.results.response || [],
                    visible: false
                })
            });
    }

    doSearch(e) {
        const { name, value } = e.target;
        this.setState({
            [name]: value
        });
        console.log("Initiate Search");
    }
runLog() {
        console.log("Initiate Run Log");
    }
    downloadOutput() {
        var name = document.getElementById('logBody');
        console.log("execute");
        //const element = document.createElement("a");
        //const file = new Blob([content], { type: 'text/plain' });
        //element.href = URL.createObjectURL(file);
        //element.download = "log.txt";
        //document.body.appendChild(element); // Required for this to work in FireFox
        //element.click();
    }
    render() {
        const { data, Search, visible } = this.state;  
         return data.length > 0 ? (
            <div className="row row-centered">
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-centered">
                    <div id="Search" className="row col-xs-5 col-lg-2">
                        <div className="form-group">
                            <input className='form-control' type="text" placeholder="Search" name="Search" value={Search} onChange={this.doSearch} autoFocus />
                        </div>
                    </div>
                    <table className="table table-striped">
                        <thead>                            
                             <tr>
                                 <th onClick={e => this.doSort('name')}>Name</th>
                                 <th onClick={e => this.doSort('job')}>Job</th>
                                 <th onClick={e => this.doSort('start')}>Start</th>
                                 <th onClick={e => this.doSort('end')}>End</th>
                                 <th onClick={e => this.doSort('status')}>Status</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                <tbody>
                    {
                         data.map((dt) => {
                            return (
                                <tr key={dt.id}>                                 
                                    <td>{dt.name}</td>
                                    <td>{dt.job}</td>
                                    <td>{dt.start}</td>
                                    <td>{dt.end}</td>
                                    { dt.status ?
                                        <td>
                                            <div className="alert alert-success" role="alert"></div>
                                        </td>
                                   :                                      
                                        <td>
                                            <div className="alert alert-danger" role="alert"></div>
                                        </td>
                                    }
                                    <td><button type="button" className="btn btn-primary" onClick={this.runLog}>Run Job</button></td>
                                    <td><button type="button" className="btn btn-info" onClick={() => this.refs.modalLog.open()}>View Run Log</button>
                                        <PureModal
                                            header={dt.name}
                                            scrollable
                                            width="300px"
                                            draggable
                                            footer={<div><button type="button" className="btn btn-info" onClick={() => this.downloadOutput }>Download Job {dt.name}</button></div>}
                                            onClose={this.HandleClose}
                                            ref="modalLog"
                                        >
                                            <p id="logBody">{dt.logs}</p>
                                        </PureModal>
                                    </td>   

                                </tr>                               
                            );
                        })
                    }
                </tbody>
                    </table>                    
                </div> 
            </div>
        ) :
            <div className="row">
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <p>No Data to Display at the moment</p>
                </div>
            </div>;
        }
}
function mapStateToProps(state) {

    return {
    };
}
const mapDispatchToProps = dispatch => ({    
    getJobs: () => dispatch(jobActions.getJobs())
});
export default connect(mapStateToProps, mapDispatchToProps)(LoadTable);

Answer 1

这个 onClick 处理程序现在的设置方式是它正在调用一个回调函数，returns 你 downloadOutput 函数但是这个函数本身没有被调用，因为没有 () 存在。您需要将其重写为 onClick={() => this.downloadOutput()}

但是，由于downloadOuput没有接收任何参数，您不必通过回调函数调用它，直接使用onClick 事件本身来调用此函数。 onClick={this.downloadOutput}

此外， this.downloadOutput = this.downloadOutput.bind(this) 在构造函数中绑定 this 值。

希望有所帮助 (:

为什么我的函数不会使用 reactjs 在弹出 window 中执行 onclick？

Why would is my function not executing onclick in pop up window using reactjs?

popupwindow

reactjs