Reactjs 表单提交时preventDefault不工作

我正在尝试使用表单提交功能提醒我的表单数据。提交后，我需要防止重新加载。请检查下面的代码

这是我的渲染方法

    render() {
    return (
        <div>
            <form onSubmit={() => this.formSubmitHandler(this.state.username, this.state.password, this.state.logtype )}>
            <input type="text" placeholder="Username" value={this.state.username} onChange={this.usernameHandler} />
            <input type="password" placeholder="Password" value={this.state.password} onChange={this.passwordHandler} />
            <select value={this.state.logtype} onChange={this.typeHandler}>
                <option value="Primary"> Primary</option>
                <option value="Secondary"> Secondary</option>
            </select>
            <button>Submit</button>
            </form>
        </div>
    );
}

此功能工作正常，警报也工作正常。但是event.preventDefault（）不起作用

---

错误为“意外使用‘事件’无限制全局变量”。如何在您的on submit方法pass事件作为参数中修复此问题

onSubmit={(event) => this.formSubmitHandler(event, this.state.username, this.state.password, this.state.logtype )}

并从formSubmitHandler获取get事件作为参数

formSubmitHandler = (event, a,b,c) => {
  event.preventDefault();
 alert(`${a} + ${b} + ${c}`);  
}

---

在on submit方法中，将事件作为参数传递

onSubmit={(event) => this.formSubmitHandler(event, this.state.username, this.state.password, this.state.logtype )}

并从formSubmitHandler获取get事件作为参数

formSubmitHandler = (event, a,b,c) => {
  event.preventDefault();
 alert(`${a} + ${b} + ${c}`);  
}

---

无需将状态传递给this.formSubmitHandler，因为您可以在函数内部访问它

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { username: "", password: "", logtype: "" };

    this.usernameHandler = this.usernameHandler.bind(this);
    this.passwordHandler = this.passwordHandler.bind(this);
    this.typeHandler = this.typeHandler.bind(this);
    this.formSubmitHandler = this.formSubmitHandler.bind(this);
  }

  usernameHandler() {
    // your code
  }

  passwordHandler() {
    // your code
  }

  typeHandler() {
    // your code
  }

  formSubmitHandler(e) {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.formSubmitHandler}>
          <input
            type="text"
            placeholder="Username"
            value={this.state.username}
            onChange={this.usernameHandler}
          />
          <input
            type="password"
            placeholder="Password"
            value={this.state.password}
            onChange={this.passwordHandler}
          />
          <select value={this.state.logtype} onChange={this.typeHandler}>
            <option value="Primary"> Primary</option>
            <option value="Secondary"> Secondary</option>
          </select>
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

从“React”导入React；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={username:，password:，logtype:}；
this.usernameHandler=this.usernameHandler.bind（this）；
this.passwordHandler=this.passwordHandler.bind（this）；
this.typeHandler=this.typeHandler.bind（this）；
this.formSubmitHandler=this.formSubmitHandler.bind（this）；
}
usernameHandler（）{
//你的代码
}
passwordHandler（）{
//你的代码
}
typeHandler（）{
//你的代码
}
FormSubmitMandler（e）{
e、 预防默认值（）；
console.log（this.state）；
}
render（）{
返回(
主要的，重要的
次要的
提交
);
}
}

无需将状态传递给this.formSubmitHandler，因为您可以在函数内部访问它

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { username: "", password: "", logtype: "" };

    this.usernameHandler = this.usernameHandler.bind(this);
    this.passwordHandler = this.passwordHandler.bind(this);
    this.typeHandler = this.typeHandler.bind(this);
    this.formSubmitHandler = this.formSubmitHandler.bind(this);
  }

  usernameHandler() {
    // your code
  }

  passwordHandler() {
    // your code
  }

  typeHandler() {
    // your code
  }

  formSubmitHandler(e) {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.formSubmitHandler}>
          <input
            type="text"
            placeholder="Username"
            value={this.state.username}
            onChange={this.usernameHandler}
          />
          <input
            type="password"
            placeholder="Password"
            value={this.state.password}
            onChange={this.passwordHandler}
          />
          <select value={this.state.logtype} onChange={this.typeHandler}>
            <option value="Primary"> Primary</option>
            <option value="Secondary"> Secondary</option>
          </select>
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

从“React”导入React；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={username:，password:，logtype:}；
this.usernameHandler=this.usernameHandler.bind（this）；
this.passwordHandler=this.passwordHandler.bind（this）；
this.typeHandler=this.typeHandler.bind（this）；
this.formSubmitHandler=this.formSubmitHandler.bind（this）；
}
usernameHandler（）{
//你的代码
}
passwordHandler（）{
//你的代码
}
typeHandler（）{
//你的代码
}
FormSubmitMandler（e）{
e、 预防默认值（）；
console.log（this.state）；
}
render（）{
返回(
主要的，重要的
次要的
提交
);
}
}

能否请您提供完整的代码，在您的formSubmitHandler中，您没有收到

事件

，因此您无法对其调用

事件。PreventedFault（）

，但我仍然需要检查完整的代码以帮助您。能否请您提供完整的代码，在formSubmitHandler中，您没有收到

事件

，因此无法对其调用

事件.preventeDefault（）

，但我仍然需要检查完整的代码以帮助您。