Javascript reactjs preventDefault（）不会阻止表单提交时重新加载页面

编辑：事件根本不起作用，未调用onSubmit和onChange函数。我有另一个类似形式的reactapp，onChange和onSubmit在那里工作正常

我有一个表单，当我点击提交时，我不希望页面刷新。我尝试使用

preventDefault（）

，但没有成功。即使onChange正在控制台上打印任何内容。此表单不在第页，我正在使用React Router将

指向='/new'

和

组件={NewPost}

（NewPost位于

/components/posts/form

）

./components/posts/form.js：

import React, { Component } from "react";
import { connect } from "react-redux";

class NewPost extends Component {
  state = {
    title: "",
    body: "",
    status: 0,
  };

  onSubmit = (e) => {
    e.preventDefault();
    const post = e;
    console.log(post);
  };

  onChange = (e) => {
    console.log(e.target.value);
    this.setState({
      [e.target.name]: e.target.value,
    });
  };
  render() {
    const { title, body, status } = this.state;
    return (
      <div className="card card-body mt-4 mb-4">
        <h2>New Post</h2>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>Title</label>
            <input
              type="text"
              name="title"
              value={title}
              onChange={this.onChange}
              className="form-control"
            />
          </div>
          <div className="form-group">
            <label>Content</label>
            <textarea
              type="text"
              name="body"
              rows="15"
              value={body}
              onChange={this.onChange}
              className="form-control"
            />
          </div>

          <div className="form-group">
            <button className="btn btn-primary" type="submit">
              Submit
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default NewPost;

import React，{Component}来自“React”；
从“react redux”导入{connect}；
类NewPost扩展组件{
状态={
标题：“，
正文：“，
状态：0，
};
onSubmit=（e）=>{
e、 预防默认值（）；
const post=e；
控制台日志（post）；
};
onChange=（e）=>{
console.log（如target.value）；
这是我的国家({
[e.target.name]：e.target.value，
});
};
render（）{
const{title，body，status}=this.state；
返回(
新职位
标题
内容
提交
);
}
}
导出默认NewPost；

App.js：

import React from "react";
import NavBar from "./components/layout/navbar";
import store from "./store";
import { Provider } from "react-redux";
import Dashboard from "./components/posts/dashboard";
import NewPost from "./components/posts/form";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <React.Fragment>
            <div className="container">
              <NavBar />
              <Switch>
                <Route exact path="/" component={Dashboard}></Route>
                <Route exact path="/new" component={NewPost}></Route>
              </Switch>
            </div>
          </React.Fragment>
        </Router>
      </Provider>
    );
  }
}
export default App;

从“React”导入React；
从“/components/layout/NavBar”导入导航栏；
从“/store”导入存储；
从“react redux”导入{Provider}；
从“/components/posts/Dashboard”导入仪表板；
从“/components/posts/form”导入NewPost；
进口{
HashRouter作为路由器，
路线,，
转换
重新使用
}从“反应路由器dom”；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

---

问题与代码无关。我创建了新的react应用程序并移动了所有代码，现在一切正常。

提供所有代码，就像路由器和相关应用程序一样components@TaghiKhavariDone有什么问题吗？它工作正常@someone特殊事件已断开连接/无法在我的应用程序上工作。我甚至没有得到console.log（即target.value）的输出；在我这边，他已经为你做了一个没有问题的代码沙盒，如果你不能重现问题，这意味着你在其他地方有一个与问题无关的问题