javascript - react 条件渲染表单自动提交

Question

在开发个人副项目时，我遇到了一个以前从未遇到过的通知。

在最高的组件中有一个三元组，每个三元组包含一个简单的形式:

{ this.state.isConnected
      ? <Chat handleSubmit={ this.handleChatSubmit } />
      : <Register handleSubmit={ this.handleRegisterSubmit } />
}

当状态改变(isConnected)时，它会显示聊天。聊天包含一个表单，以便用户可以使用按钮和按键来提交消息。但是，当我使用表单元素时，它会给出下一个通知: Screenshot 1: Chrome debugger notice .

注册.js

<form onSubmit={ () => this.props.handleSubmit(this.state) }>
      <label>
        <span>Username *</span>
        <input
          type="text"
          name="username"
          onChange={ this.handleChange }
        />
      </label>

      <button>Sign in</button>
    </form>

聊天.js

<form onSubmit={ () => this.props.handleSubmit(this.state) }>
      <label>
        <input
          type="text"
          onChange={ this.handleChange }
        />
      </label>

      <button>Send message</button>
    </form>

每个表单都被阻止提交，如下所示:

handleSubmit = ({ message }) => {
...
this.socket.send(JSON.stringify(data))

event.preventDefault()

}

此问题导致页面重新加载并将消息添加到查询参数中:http://localhost:8080/?chat=it+is+refreshing

如果我使用不同的方法并停止使用表单元素，它就会起作用。

Answer 1

提交表单时，必须使用 e.preventDefault()，否则会导致页面在提交表单时重新加载。

将 onSubmit={ () => this.props.handleSubmit(this.state) } 更改为 onSubmit={ (e) => e.preventDefault();this.props .handleSubmit(this.state) }

或者添加一个由表单的 onSubmit 函数调用的函数，如下所示:

handleSubmitForm = e => {
  e.preventDefault();
  this.props.handleSubmit(this.state)
}