使用蚂蚁设计将数据保留在输入中

如何解决使用蚂蚁设计将数据保留在输入中

我创建了一个包含两个步骤的应用程序。在每一步中，用户都应在输入中添加一些数据。 单击按钮2后，用户更改步骤。我想创建一个场景：

1. 从第一步开始填写用户表格，然后单击按钮2
2. 当用户单击按钮1时，第一个表单应与之前添加的数据一起出现。

const [state,seState] = useState(1);

  const one = () => {
    seState(1);
  };

  const two = () => {
    seState(2);
  };
  return (
    <div>
      {state === 1 ? <Form1 /> : <Form2 />}
      <button onClick={one}>1</button>
      <button onClick={two}>2</button>
    </div>
  );
};

演示：https://codesandbox.io/s/basic-usage-antd480-forked-kdyyn?file=/index.js:252-615
问题：蚂蚁是否已设计此内置功能？如何保留每个步骤中的数据，以及当用户切换步骤时，数据应位于输入内部？

解决方法

要保留数据，无论是否蚂蚁，您都需要做出选择。首先，您可以将所有表单保留在DOM中，并使用CSS隐藏它们（sandbox）：

  const [state,seState] = useState(1);

  const one = () => {
    seState(1);
  };

  const two = () => {
    seState(2);
  };
  return (
    <div>
      <div style={state === 1 ? { display: "block" } : { display: "none" }}>
        <Form1 />
      </div>
      <div style={state === 2 ? { display: "block" } : { display: "none" }}>
        <Form2 />
      </div>
      <button onClick={one}>1</button>
      <button onClick={two}>2</button>
    </div>
  );

第二，您可以选择每次执行setState时都重新填写表单值，方法是将数据保存在共享存储中，例如redux或userReducer。对于不需要太多逻辑且没有大型DOM的简单表单，我选择第一种方法。在动态和复杂数据场景中，第二种方法可能是更好的选择。