h5-Dooring/doc/zh/guide/deployDev/form.md

获取 Form 组件的值数据

Form 表单组件在editor目录下src/components/BasicShop/BasicComponents位置.

Form 组件是Dooring的核心组件之一, 内部的值通过 Form 组件内部收集, 当然我们也可以暴露出来让其他交互或者组件消费(需要一定的二次开发), 关键代码如下:

req
  .post(`/vip/h5/form/post${location.search}`, { ...fields, ...formData })
  .then(res => {
    if (type === "link") {
      // 解析参数
      let isPre = content.indexOf("?") < 0;
      let query = { dr: Date.now(), from: urlParmas.tid };
      try {
        query = params ? { ...JSON.parse(params), ...query } : query;
      } catch (err) {
        console.log(err);
      }

      // 跳转
      if (content.indexOf("http") > -1) {
        window.location.href = content + urlencode(query, isPre);
        return;
      }

      history.push(`/m?tid=${content}&${urlencode(query)}`);
    } else if (type === "modal") {
      setVisible(true);
    } else if (type === "code") {
      eval(content);
    }
  });

数据收集提交的核心代码在 Form 组件的第 56-149 行, 也就是submit方法. 表单组件收集到的数据统一存放在代码中的formData字段, 所以要想在其他地方获取用户表单填写的值, 我们只需要手动将formData传递出去, 或者挂载到全局(如 window 对象, localStorage, indexedDB 等).