Условный рендеринг форм приводит их к тому же состоянию

Question

Я пытался сделать некоторые формы условно на основе режима EDIT / VIEW и заметил, что они находятся в одном и том же состоянии!Просить просто понять, что происходит и есть ли выход из таких случаев.Я знаю, что один подход будет;внутри компонента Form, чтобы сделать оба режима редактирования и просмотра и передать флаг для editMode как prop, но особенно интересовался этим случаем.Попробуйте то же самое, используя ref для каждой формы, и происходит то же самое.Я включил jsfiddle для случая, о котором я говорю!

Руководство: Входы в верхней части показывают случай, когда они оба показаны и никакой условный рендеринг не используется.Вход внизу имеет кнопку для переключения между режимом VIEW / EDIT и отображает соответствующий вход в зависимости от режима.Нажатие на них в каждом режиме заставляет их делить состояние (или, возможно, один и тот же ввод отображается для обоих случаев)

Условное отображение формы 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>