javascript - 当我从表单提交时只渲染一个 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>);