Javascript 不同的反应形式是共享状态，如何将它们分开？

我的情况是，根据我的表单的道具值，我需要渲染不同的表单。这很好；它根据需要以编程方式加载表单的文本，并填充表单。但是，当step的值更改时，文本和输入类型等都会更改，但用户指定的输入是共享的

请注意，步骤由redux状态管理，并由整个应用程序中的各种操作更改。更改状态确实会导致组件正确地重新绘制

也就是说，如果用户在第三个框中输入foo并点击next，则表单将使用新文本、格式等重新绘制，但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>;
  }
};

---

这是组件的道具被更改的一般情况，因此使用新道具重新呈现组件

但由于您似乎没有从道具中获取输入框的值，因此只有输入框的属性会根据传递给CenterFormInput的新道具进行更改

尝试传递道具中字段的值。默认情况下，道具中字段的值可能为空或null

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事件上的值。这将在重新渲染时重置输入框的值或将其设置为传递的值

或者，您也可以使Statefull组件保持状态，并在ComponentWillReceiveProps或getDerivedStateFromProps上重置该值，具体取决于您使用的react的版本

---

如果有更多细节，请随时添加评论

你能添加下一个按钮出现的组件吗？@NamanKheterpal done；它是通过redux州填充的