Question

现在尝试一些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>

Answer 1

您应将无效值与state.value分开。

因此，如果您的API调用返回错误，则将当前的state.value复制到新的状态变量中，例如state.errorValue。这是呈现错误消息的方式：

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

在用户再次输入内容或成功加入api之后（以适合的情况为准），请清除您的state.errorValue.

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

1 个答案: