使用 ant design 将数据保存在输入中

Question

我创建了一个包含 2 个步骤的应用程序。在每一步，用户都应该在输入中添加一些数据。 单击按钮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
问题：ant 是否设计了这个内置功能？如何保留每个步骤的数据，以及用户何时切换步骤时数据应该在输入中？

Answer 1

要保留数据，无论是否蚂蚁，您都需要做出选择。首先，您可以将所有表单保留在 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 的简单表单，我选择了第一种方法。在动态和复杂的数据场景中，第二种方法可能是更好的选择。