Почему моя функция не выполняет onclick во всплывающем окне с помощьюactjs?

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.

Надеюсь, что помогло (: