为什么我的函数没有使用reactjs在弹出窗口中执行onclick？

Question

我试图通过onclick事件执行一个函数，但没有任何反应。我的目的是在单击弹出窗口中的下载按钮后启动该功能。我的目标是在单击“下载”按钮后触发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处理程序的方式是它调用一个回调函数，该函数返回downloadOutput函数，但由于没有()，因此不调用此函数本身。您需要将其重写为onClick={() => this.downloadOutput()}

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

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

希望有所帮助（：