时间戳

首页 > 解决方案 > 渲染到另一个元素时如何停止handleSubmit更新？

javascript - 渲染到另一个元素时如何停止handleSubmit更新？

问题描述

现在尝试一些 React，并偶然发现了一个似乎在任何地方都没有涉及的问题。

我有一个连接到 API 的非常简单的搜索表单。当返回无效值时，它会呈现带有错误消息的 Header 3 元素，例如：

xxx 值无效 请输入有效的增值税号

简而言之，我似乎无法找到如何停止“xxx”重新渲染。在发送新请求之前，每次我开始从字段中输入或删除文本时，“无效值 xxx”都会更新，但我希望它停止

在我尝试寻找任何提示或想法的任何地方，文档中的任何地方都没有描述这种情况（或者我可能不知道在哪里寻找）。搜索互联网也没有显示任何结果。

由于某些奇怪的原因，非常简单地删除了 handleChange 并将 this.setState 移动到 handleSubmit 并没有奏效。


     handleChange(event) {
      this.setState({ value: event.target.value });
    }


      <form onSubmit={this.handleSubmit}>
        <label style={Style}>Search VAT:</label>
        <input type="text" style={Style} />
        <input type="submit" value="Submit" />
      </form>

   <h3>
          Invalid value {` `} {this.state.value}
          <br /> <br />
          Please enter valid VAT Number
   </h3>

标签： javascripthtmlreactjsforms

解决方案

您应该将您的无效值与您的state.value.

因此，如果您的 API 调用返回错误，此时将您的当前状态复制state.value到新的状态变量中，例如state.errorValue. 这是您应该用来呈现错误消息的内容：

<h3>
      Invalid value {this.state.errorValue}
      <br /> <br />
      Please enter valid VAT Number
</h3>

在用户再次开始输入或成功提交到 api 之后（以适合者为准），清除您的state.errorValue.

推荐阅读