仅当我从表单提交时才呈现一个React组件

Question

我在提交表单数据后只能渲染组件时遇到麻烦。

所以我有一个具有基本渲染的应用程序：

(<div>
  <form onSubmit={this.onSubmit.bind(this)}>
  </form>
  <Results/>
</div>);

这个想法是onSubmit Results仅在提交时才将一些数据转储到组件中。

现在，老实说，该应用将在其状态内具有值：

this.state = {
  length : 0,
  timeInSeconds: 0
}

因此，我只希望它在用户单击“提交”按钮并且执行onSubmit方法时呈现或重新呈现此对象。

抱歉，这不是我想要的，但是任何建议或指导都很棒！

谢谢，凯利

Answer 1

您可以在onSubmit结束时标记完成状态并有条件地呈现结果吗？就像是：

this.state = {
  length : 0,
  timeInSeconds: 0,
  isSubmitted: false
}

onSubmit(e) {
    // Do something
    this.setState({isSubmitted: true})
}

然后放置一个条件以呈现结果。

(<div>
  <form onSubmit={this.onSubmit.bind(this)}>
  </form>
  {this.state.isSubmitted && <Results/>}
</div>);