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)
}