更新状态时如何防止模态重新渲染？

Question

我有一个带有两个输入的react-bootstrap模态。 当状态中的showModal属性更改为true时，将显示模式。 输入值更改时，我会更新fieldOne属性（也在状态内）。 因此，每当我在输入中输入内容时，模态闪烁也会重新呈现。

更新状态时，如何防止Modal重新渲染？

Answer 1

如果您不想重新渲染，请使用state以外的其他变量来保存数据：

 let spanEl = JSON.stringify(jsonObj).replace("Hello World", `<span className="inlineContainer">Hello World!</span>`)

状态的目的是让React评估DOM是否需要更改，以及是否需要重新渲染。

Answer 2

我遇到了同样的问题 - 将表单放入模态会导致每次按键时模态重新呈现。

我可能可以通过从模态中分离出表单来解决这个问题，但我希望模态和表单在同一个组件中，因为模态按钮会触发表单保存。是的，还有其他方法可以处理这个问题，比如在拆分模式和表单之间传递保存功能，但现在它变得混乱了。

所以我的解决方案是使模态中的表单不受控制。这意味着更改字段值不会修改状态，因此模态不会重新渲染。

Answer 3

也许您应该将输入的模态分为两个独立的部分。那应该解决您的重新提交问题。