单击提交按钮时，未调用 onClick() 方法答案

【问题标题】：When clicking on submit button, the onClick() method is not getting called单击提交按钮时，未调用 onClick() 方法
【发布时间】：2020-08-24 17:42:59
【问题描述】：

我是新手，我正在努力解决我所犯的错误或错误。当我在填写数据后单击提交按钮时，页面既不刷新也不显示任何成功消息。谁能帮我解决这个问题这是我的 app.js

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

import AuthService from "./services/auth.service";

import Login from "./components/login.component";
import Register from "./components/register.component";
import Home from "./components/home.component";
import Profile from "./components/profile.component";
import BoardUser from "./components/board-user.component";
import BoardAdmin from "./components/board-admin.component";

class App extends Component {
  constructor(props) {
    super(props);
    this.logOut = this.logOut.bind(this);

    this.state = {
      showAdminBoard: false,
      currentUser: undefined
    };
  }

  componentDidMount() {
    const user = AuthService.getCurrentUser();

    if (user) {
      this.setState({
        currentUser: user,
        showAdminBoard: user.roles.includes("ROLE_ADMIN")
      });
    }
  }

  logOut() {
    AuthService.logout();
  }

  render() {
    const { currentUser, showAdminBoard } = this.state;

    return (
      <Router>
        <div>
          <nav className="navbar navbar-expand navbar-dark bg-dark">
            <Link to={"/"} className="navbar-brand">
              Flight Reservation System
            </Link>
            <div className="navbar-nav mr-auto">
              <li className="nav-item">
                <Link to={"/home"} className="nav-link">
                  Home
                </Link>
              </li>

              {showAdminBoard && (
                <li className="nav-item">
                  <Link to={"/admin"} className="nav-link">
                    Admin 
                  </Link>
                </li>
              )}

              {currentUser && (
                <li className="nav-item">
                  <Link to={"/user"} className="nav-link">
                    User
                  </Link>
                </li>
              )}
            </div>

            {currentUser ? (
              <div className="navbar-nav ml-auto">
                <li className="nav-item">
                  <Link to={"/profile"} className="nav-link">
                    {currentUser.username}
                  </Link>
                </li>
                <li className="nav-item">
                  <a href="/login" className="nav-link" onClick={this.logOut}>
                    LogOut
                  </a>
                </li>
              </div>
            ) : (
              <div className="navbar-nav ml-auto">
                <li className="nav-item">
                  <Link to={"/login"} className="nav-link">
                    Login
                  </Link>
                </li>

                <li className="nav-item">
                  <Link to={"/register"} className="nav-link">
                    Sign Up
                  </Link>
                </li>
              </div>
            )}
          </nav>

          <div className="container mt-3">
            <Switch>
              <Route exact path={["/", "/home"]} component={Home} />
              <Route exact path="/login" component={Login} />
              <Route exact path="/register" component={Register} />
              <Route exact path="/profile" component={Profile} />
              <Route exact strict path="/user" component={BoardUser} />
              <Route exact strict path="/admin" component={BoardAdmin} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

这是我的 board-admin.component.js：

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "../Navbar.css";
import AddComponent from "./add-component";
import DeleteComponent from "./delete-component";
import UpdateComponent from "./update-component";
import UserService from "../services/user.service";

export default class BoardAdmin extends Component {
  constructor(props) {
    super(props);

    this.state = {
      content: ""
    };
  }

  componentDidMount() {
    UserService.getAdminBoard().then(
      response => {
        this.setState({
          content: response.data
        });
      },
      error => {
        this.setState({
          content:
            (error.response &&
              error.response.data &&
              error.response.data.message) ||
            error.message ||
            error.toString()
        });
      }
    );
  }

  render() {
    return (
      <Router>
      <div>
      <div className="navbars">
            <ul>
                <li>
                <Link className="link" to={"/add"} >
                  Add
                </Link>
              </li>
              <li>
                <Link className="link" to={"/update"} >
                  Update
                </Link>
              </li>
              <li>
                <Link className="link" to={"/delete"}>
                  Delete
                </Link>
              </li>
            </ul>
        </div>
        <div >
            <Switch>
              <Route exact path="/add" component={AddComponent} />
              <Route exact path="/update" component={UpdateComponent} />
              <Route path="/delete" component={DeleteComponent} />
            </Switch>
          </div>
      </div>
      </Router>
    );
  }
}

这是我的 add-component.js：

import React, { Component } from "react";
import FlightsService from "../services/flights.service";

export default class AddComponent extends Component {
  constructor(props) {
    super(props);
    this.onChangeName = this.onChangeName.bind(this);
    this.onChangeFrom = this.onChangeFrom.bind(this);
    this.onChangeTo = this.onChangeTo.bind(this);
    this.onChangeDate = this.onChangeDate.bind(this);
    this.onChangeFare = this.onChangeFare.bind(this);
    this.saveFlight = this.saveFlight.bind(this);
    this.newFlight = this.newFlight.bind(this);

    this.state = {
      id: null,
      name: "",
      from: "",
      to: "",
      date: "",
      fare: "",
      submitted: false
    };
  }

  onChangeName(e) {
    this.setState({
      name: e.target.value
    });
  }

  onChangeFrom(e) {
    this.setState({
      from: e.target.value
    });
  }
  onChangeTo(e) {
    this.setState({
      to: e.target.value
    });
  }
  onChangeDate(e) {
    this.setState({
      date: e.target.value
    });
  }
  onChangeFare(e) {
    this.setState({
      fare: e.target.value
    });
  }

  saveFlight() {
    var data = {
      name: this.state.name,
      from: this.state.from,
      to:this.state.to,
      date:this.state.date,
      fare:this.state.fare
    };

    FlightsService.create(data)
      .then(response => {
        this.setState({
          id: response.data.id,
          name: response.data.name,
          from: response.data.from,
          to: response.data.to,
          date:response.data.date,
          fare:response.data.fare,
          submitted: true
        });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }

  newFlight() {
    this.setState({
      id: null,
      name: "",
      from: "",
      to: "",
      date: "",
      fare:"",
      submitted: false
    });
  }

  render() {
    return (
      <div className="submit-form">
        {this.state.submitted ? (
          <div>
            <h4>You submitted successfully!</h4>
            <button className="btn btn-success" onClick={this.newFlight}>
              Add
            </button>
          </div>
        ) : (
          <div>
            <div className="form-group">
              <label htmlFor="title">Name</label>
              <input
                type="text"
                className="form-control"
                id="title"
                required
                value={this.state.name}
                onChange={this.onChangeName}
                name="title"
              />
            </div>

            <div className="form-group">
              <label htmlFor="description">From</label>
              <input
                type="text"
                className="form-control"
                id="description"
                required
                value={this.state.from}
                onChange={this.onChangeFrom}
                name="description"
              />
            </div>

            <div className="form-group">
              <label htmlFor="description">To</label>
              <input
                type="text"
                className="form-control"
                id="description"
                required
                value={this.state.to}
                onChange={this.onChangeTo}
                name="description"
              />
            </div>

            <div className="form-group">
              <label htmlFor="description">Date</label>
              <input
                type="text"
                className="form-control"
                id="description"
                required
                value={this.state.date}
                onChange={this.onChangeDate}
                name="description"
              />
            </div>

            <div className="form-group">
              <label htmlFor="description">Fare</label>
              <input
                type="text"
                className="form-control"
                id="description"
                required
                value={this.state.fare}
                onChange={this.onChangeFare}
                name="description"
              />
            </div>

            <button onClick={this.saveFlight} className="btn btn-success">
              Submit
            </button>
          </div>
        )}
      </div>
    );
  }
}

这是我的 axios 相关数据：

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8002/api",
  headers: {
    "Content-type": "application/json"
  }
});

这是我的服务：

import http from "../http-common";

class FlightsService {
  
  create(data) {
    return http.post("/flights", data);
  }

  update(id, data) {
    return http.put(`/flights/${id}`, data);
  }

  delete(id) {
    return http.delete(`/flights/${id}`);
  }
}
export default new FlightsService();

【问题讨论】：

单击保存/提交按钮后，您是否在控制台 (F12) 中看到任何错误？
是否有任何一个控制台登录saveFlight 输出？
对于大多数潜在的回答者（包括我）来说，这里有太多的事情想要筛选它。你应该尝试自己做一些基本的调试，使用开发者工具（包括 React 开发者工具）来回答一些基本的问题，例如：网络请求正在发出吗？回复是否回来了，是您期望的吗？状态是否以您期望的方式更新？通过依次查看每个部分，您应该能够缩小问题所在的范围，然后如果您仍然遇到问题，请将问题简化为我们可以更轻松地提供帮助的小示例。
非常感谢@MattU 我已经找到了问题的解决方案，是CORS问题，通过控制台（F12）解决了问题

标签： javascript reactjs axios

【解决方案1】：

你试过annon函数吗？

            <button onClick={this.saveFlight} className="btn btn-success">

进入

            <button onClick={()=>{this.saveFlight()}} className="btn btn-success">

您还将单击处理程序的功能绑定到组件的类。我不确定这是否正确（不是 100% 反应最佳实践），我还没有深入反应 - 但是使用处理应用程序级别的所有点击事件的主点击处理程序一直是我绑定时的策略功能...有效 - 但我不能保证这不是一个糟糕的主意。

【讨论】：