react形式的onsubmit函数让控制台清零刷新

问题描述

react 形式的 onsubmit 函数强制控制台清除和刷新，从而使我无法查看日志和分析它们。

我想在我的表单中的提交按钮被点击后在我的控制台上记录一些单词。 但是只要点击按钮，控制台就会刷新，我只能看到一小会儿日志。

这是我的代码：

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      username: "",password: "",};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const {name,value,type,checked} = event.target
    type === "checkBox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
    console.log("changed");
  }

  handleSubmit() {
    console.log("submited");
  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <div className="container">
          <label htmlFor="username"><b>Username</b></label>
          <input 
            type="text" 
            value={this.state.username}
            placeholder="Enter Username" 
            name="username" 
            onChange={this.handleChange} 
            required>
          </input>

          <label htmlFor="password"><b>Password</b></label>
          <input 
            type="password" 
            value={this.state.password}
            placeholder="Enter Password" 
            name="password"
            onChange={this.handleChange}  
            required>
          </input>

          <button>Login</button>

        </div>

      </form>
    );
  }
}

export default App;

谢谢。

解决方法

因为表单是提交表单的原生方式，这是对表单网址的正常页面刷新或操作。你可以 采用 e.preventDefault()

防止这种情况

类似的东西

  handleSubmit(e) {
    e.preventDefault();
    console.log("submited");
  }

推迟提交

,

见兄弟！ form 具有原生默认行为，即在您按 Enter 提交后刷新。因此，我们可以通过包含这个简单的 1 LOC 来防止表单的这种原生行为：

event.preventDefault()

Qn 出现了？在哪里包含它的代码行 (LOC) ans:在您的 handleSubmit 方法中，传入事件参数，并在开头添加。

像这样：-

handleSubmit(e) {
   e.preventDefault();
   console.log("submited");
}