Question

我试图基于EDIT / VIEW模式有条件地渲染某些表单，并发现它们共享相同的状态！要求仅了解正在发生的事情，并且有没有解决此类情况的方法。我知道一种方法是。在Form组件内部进行编辑和查看模式，并将editMode的标志作为prop传递，但是在这种情况下尤其感兴趣。尝试对每种形式使用ref进行相同操作，并且发生相同的事情。我正在谈论的案件中已经包含jsfiddle！

指南：顶部的输入显示了同时显示它们且不涉及条件渲染的情况。底部的输入有一个按钮可以在VIEW / EDIT模式之间切换，并根据该模式呈现适当的输入。在每种模式下键入它们会使它们共享状态（或者可能在两种情况下都呈现相同的输入）

Conditional form rendering JSFIDDLE

Answer 1

如果要重新渲染输入，可以为NameForm添加键属性，然后单击“切换模式”后，React将重新渲染NameForm组件。

  <div className="row">
  {
    isEditMode
    ? <div className="col">
    <NameForm name="View mode from" key="1"/>
  </div>
  :  <div className="col">
    <NameForm name="Edit mode from" key="2"/>
  </div>
  }
  </div>

表单的条件渲染使它们共享相同的状态

1 个答案: