react form中的onsubmit函数让console清空刷新

Question

react form中的onsubmit函数强制console清空刷新，导致我看不到日志，无法分析。

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

这是我的代码：

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;

谢谢。

Answer 1

因为表单正在执行的是提交表单的本机方式，这是对表单的正常页面刷新或操作 url。你可以采用 e.preventDefault()

防止

有点像

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

推迟提交

Answer 2

见兄弟！ form 具有本机默认行为，在您按 Enter 键提交后刷新。因此，我们可以通过包含这个简单的 1 LOC:

来防止表单的这种本机行为

event.preventDefault()

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

像这样：-

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

react form中的onsubmit函数让console清空刷新

The onsubmit function in react form makes the console to clear and refresh

html

javascript

console.log

reactjs