Xamarin Forms表单页数据回传至前页的实现问题

常见可行方案 #

1. 本地存储（SessionStorage/LocalStorage） #

适合普通多页面场景，无需后端介入：

• 表单页保存时存储数据：

// 绑定保存按钮点击事件
document.querySelector('#save-btn').addEventListener('click', () => {
  const formData = {
    username: document.querySelector('#username').value,
    phone: document.querySelector('#phone').value
    // 其他表单字段
  };
  // 用sessionStorage临时存储，页面关闭后自动清除
  sessionStorage.setItem('submittedFormData', JSON.stringify(formData));
  // 返回上一页
  window.history.back();
});

• 原页面加载时读取并展示：

window.addEventListener('load', () => {
  const savedData = sessionStorage.getItem('submittedFormData');
  if (savedData) {
    const formData = JSON.parse(savedData);
    // 将数据插入页面指定位置
    document.querySelector('#display-area').innerHTML = `
      <p>用户名：${formData.username}</p>
      <p>手机号：${formData.phone}</p>
    `;
    // 移除存储的内容，避免重复展示
    sessionStorage.removeItem('submittedFormData');
  }
});

2. 路由参数传递（单页应用场景） #

如果是Vue/React这类SPA，通过路由携带参数返回：
以React为例：

• 表单页提交后跳转回原页面并传参：

import { useNavigate } from 'react-router-dom';

function FormPage() {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({ name: '', age: '' });

  const handleSave = () => {
    // 把数据转成字符串通过query传递
    navigate(`/previous-page?data=${encodeURIComponent(JSON.stringify(formData))}`);
  };

  return (
    // 表单内容...
    <button onClick={handleSave}>保存</button>
  );
}

• 原页面读取路由参数并展示：

import { useLocation, useNavigate } from 'react-router-dom';

function PreviousPage() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    const dataParam = location.search.split('=')[1];
    if (dataParam) {
      const formData = JSON.parse(decodeURIComponent(dataParam));
      // 更新页面状态展示数据
      setDisplayData(formData);
      // 清除路由参数，避免刷新后重复读取
      navigate(location.pathname, { replace: true });
    }
  }, [location, navigate]);

  return (
    <div>
      {/* 展示数据的区域 */}
      {displayData && <p>姓名：{displayData.name}，年龄：{displayData.age}</p>}
    </div>
  );
}

3. 窗口消息通信（多窗口/标签页场景） #

如果是通过新窗口打开表单页，可以用postMessage传递数据：

• 原页面打开表单页并监听消息：

document.querySelector('#open-form-btn').addEventListener('click', () => {
  const formWindow = window.open('/form-page', '_blank');
  
  window.addEventListener('message', (e) => {
    if (e.data.type === 'formSubmitted') {
      const formData = e.data.data;
      // 展示数据
      document.querySelector('#result').textContent = `提交内容：${formData.content}`;
      formWindow.close();
    }
  });
});

• 表单页提交时发送消息给原页面：

document.querySelector('#save-btn').addEventListener('click', () => {
  const formData = { content: document.querySelector('#content').value };
  // 发送消息给父窗口
  window.opener.postMessage({ type: 'formSubmitted', data: formData }, '*');
});

为什么构造函数传参无效？ #

跨页面/路由切换时，原页面的组件实例会被销毁或重新初始化，构造函数传参仅能在同一实例的生命周期内生效，无法跨页面传递数据，因此这种方式不适用该场景。

内容的提问来源于stack exchange，提问作者carlos