Question

我有一个奇怪的情况，即使在事件处理程序中进行调用，我的AXIOS ajax调用正在进行中。流程如下。

我有一个material-ui抽屉，它有一个listitem，用于在我的主页面上交换组件。该组件有一个提交按钮，可以对一个REST API进行Axios调用，但是当我单击提交时，它不会从ListItem调用事件处理程序。

以下是一些代码：

handleSubmit() {
    // var apiBaseUrl = "http://localhost:4000/api/";
    const apiBaseUrl = "http://localhost:8000/";
    axios.defaults.withCredentials = true;
    const self = this;
    const payload = {
        "to": this.state.to + " " + this.state.toTime,
        "from": this.state.from + " " +this.state.fromTime
    };
    axios.defaults.xsrfCookieName = 'csrftoken';
    axios.defaults.xsrfHeaderName = 'X-CSRFToken';
    axios.post(apiBaseUrl + 'api/SaveSchedule/', payload, { headers: {'Accept': 'application/json'} } )
        .then ( (response)  => {
            if (response.status == 200) { }
            else if (response.status == 400) {
                console.log("");
            } else {
                console.log(" ");
                alert(" ");
            }
        })
        .catch(function (error) {
            if (error.response.status==400){
                alert("Check your credentials at arlo.netgear.com. Invalid email or password. ");
                console.log("Data:" + error.response.data);
                console.log("Status: " + error.response.status);
                console.log("Headers: " + error.response.headers);
                console.log("Error: "+ error);
            } else if (error.response) {
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js
                console.log(error.request);
            }
        });
}

RENDER：

render() {
    const { from, to } = this.state;
    const modifiers = { start: from, end: to };
    return (
        <div className="InputFromTo">
            ...
            <form noValidate autoComplete="off">
            <TextField
                id="starttime-placeholder"
                label="Start Time:"
                placeholder="Enter Start Time"
                margin="normal"
                />
            <TextField
                id="endtime-placeholder"
                label="End Time"
                placeholder="Enter End Time"
                margin="normal"
                /><br/>
                <Button variant="raised" color="primary" onClick={this.handleSubmit}>Save Schedule</Button>
            </form>
            ...
        </div>
    )
}

EDITED 另外，我的抽屉上有一个ListItem。这是打电话的地方。

  handleListSelect(event) {
    this.props.onDrawerSelect(event.target.value);
}

render() {
    return (
        <div>
            <ListItem button>
                <ListItemIcon>
                    <ScheduleIcon/>
                </ListItemIcon>
                <ListItemText primary="Scheduler" onClick={this.handleListSelect}/>
            </ListItem>

我想知道使用props处理程序的事实是否会导致这种事件向我的孩子（具有该事件的实际组件）发送某种事件？

Answer 1

这与您在this.props.onClick组件中调用<Button/>的方式有关。可能你在<Button/>组件中所做的事情就是这样onClick={this.props.onClick()}。通过这样做，您正在调用该函数，因为()。

相反，您可以通过在handleSubmit组件中执行此onClick={this.props.onClick}来继续传递函数<Button/>的引用。

如果您决定使用箭头函数包装handleSubmit，则每次组件渲染时都将创建一个新函数。 onClick={() => this.handleSubmit()}。

在最后一个场景中，您需要使用()来启动该功能。只需执行一次：使用this.handleSubmit()或this.props.onClick()，但不能同时执行。{/ p>

希望对你有用！

Axios被调用但不在我的事件处理程序中

1 个答案: