Question

在开发个人辅助项目时，我发现了以前没有遇到过的通知。

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

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

当状态发生变化（isConnected）时，它会显示聊天。聊天包含一个表单，以便用户可以使用按钮和键提交他们的消息。但是，当我使用表单元素时，它会给出下一个通知： Screenshot 1: Chrome debugger notice

Register.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>

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

React条件渲染表单自动提交

1 个答案: