如何阻止reactjs组件重新启动状态更改

Question

我有一个带有一些输入字段的表单（其中一些隐藏，直到选中一个复选框。当我选中/取消选中该复选框时，设置了一个特定的状态（this.state.isChecked = true/false）。

在渲染方法上，我有一个包含一些类的div（包含一些输入字段）以及“show”类的这个条件：<div className={'extra-fields ' + (this.state.isChecked? ' show' : '')}>...</div>

预期的行为是在状态更改时，只有“show”类被从div中推出或删除 当前行为：再次呈现整个表单，并且输入字段中写入的所有数据都将丢失。

应该如何做到这一点？

Answer 1

如果输入字段的值很重要（它们显然是这样），并且它们可以改变（显然可以改变），那么React应该知道它们，通常是状态。
标准＆＃39; （仅）用于维护输入字段内容的反应方式为：

• 也将输入字段的内容置于状态
• 在每个输入字段的呈现中包含value={this.state.foo}和onChange={this._onChange()}之类的内容
• 在表单中包含_onChange()函数以处理输入更改

这样，每当重新呈现表单时（在每个setState()之后），输入值也会被保留。

PS：问题标题＆＃34;停止反应组件退出状态变化＆＃34;并没有真正涵盖文本中的问题：您要求部分重新渲染：根据复选框重新渲染显示/隐藏额外字段，但不重新渲染输入字段。

Answer 2

简短的回答是，您可以使用shouldUpdateComponent生命周期事件阻止组件呈现/更新：https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

但是，我同意之前的回答，为了做一些听起来像是部分重新渲染的事情，并且要遵循一般的最佳实践，你应该将输入字段的状态存储在组件中的某个位置，以便它们在渲染调用之外持续存在。