Отдельные формы React разделяют состояние, как их разделить? - PullRequest
Новая
       13

Отдельные формы React разделяют состояние, как их разделить?

0 голосов
/ 15 января 2019

Моя ситуация такова, что, в зависимости от значения опоры для моей формы (в частности, step), мне нужно визуализировать различные формы. Это отлично; он загружает текст формы программным путем и заполняет форму. Однако, когда это значение step изменяется, текст и тип ввода и т. Д. Все изменяются, но пользовательские входные данные являются общими.

Обратите внимание, что step управляется состоянием редукса и изменяется различными действиями в приложении. Изменение состояния приводит к тому, что компонент корректно перерисовывается.

То есть, если пользователь вводит foo в третьем поле и нажимает «следующий», форма перерисовывается с новым текстом, форматированием и т. Д., Но foo все еще помещается в третье поле новой формы , Это не то, что я хочу; сохранение состояния между перерисовками - это хорошо (но не обязательно), в то время как разделение состояний между различными формами определенно не то, что я хочу.

Как я могу объяснить браузеру, что это разные формы?

Вот пример неработающего кода (реальный код более сложный, но это демонстрирует проблему). Обратите внимание, что id не имеет функционального назначения, за исключением того, что я думал, что он может устранить неоднозначность форм (это не имело никакого эффекта).: 

const CenterFormInput = ({
  formElement: { inputType, elementName, help, label },
  helpTextSetter
}) => {
  return (
    <div>
      <p>{label}</p>
      <p>
        <input name={elementName} type="text" />
      </p>
    </div>
  );
};

const FormContentComponent = ({ formElements, helpTextSetter, id }) => (
  <form id={id}>
    {formElements.map((elt, i) => (
      <CenterFormInput
        formElement={elt}
        helpTextSetter={helpTextSetter}
        key={i}
      />
    ))}
  </form>
);

const FormContent = ({ step, helpTextSetter }) => {
  // index pages from zero, but steps start at one

  step -= 1;

  if (step >= 0 && step < contentPages.length) {
    const { formElements, id } = contentPages[step];
    return (
      <FormContentComponent
        formElements={formElements}
        helpTextSetter={helpTextSetter}
        formId={id}
      />
    );
  } else {
    return <div>{`No form found for step ${step}`}</div>;
  }
};

1 Ответ

0 голосов
/ 15 января 2019

Это общий случай, когда реквизиты компонента меняются, и поэтому повторный рендеринг компонента происходит с новыми реквизитами.

Но, похоже, вы не берете value поля input из реквизита, только атрибуты поля input будут изменены в соответствии с новыми реквизитами, переданными в CenterFormInput

Попробуйте передать value поля также в подпорках (может быть пустым или нулевым по умолчанию) 

const CenterFormInput = ({
  formElement: { inputType, value = null, elementName, help, label },
  helpTextSetter
}) => {
  return (
    <div>
      <p>{label}</p>
      <p>
        <input name={elementName} value={value} type="text" />
      </p>
    </div>
  );
};

и обновите значение события onChange поля ввода. Это сбросит значение input box при повторном рендеринге или установит значение, переданное.

Или вы также можете создать компонент Statefull, сохранить значение в состоянии и сбросить его на componentWillRecieveProps или getDerivedStateFromProps в зависимости от используемой вами версии реакции.

Не стесняйтесь добавлять комментарии в случае более подробной информации.

...