如何在QWIK的<Form />指令中添加隐藏参数及解决提交问题

我有一个包含手机号输入的简单表单，需要向formData中添加额外参数并传递给后端。当前表单代码如下：

<div class="regis-form-trigger">
  <input type="text" name="phone" ref={phoneInput} onInput$={onInputNr} />
  <button class="submit-btn" type="submit" ref={submitBtn} disabled></button>
</div>
</Form>

对应的action代码：

export const useRegFormAction = globalAction$(async (formData: JSONObject, { env }: RequestEventAction): Promise<any> => {
  // 期望在这里接收参数
  console.log('# formData: ', formData);
});

我希望在action的formData中接收这些额外参数，但不想使用onSubmit$={() => ...}方法——因为用这个方法时onSubmit没触发，还会触发当前URL的GET请求。如果把<Form />换成普通HTML form标签，action虽然能被调用，但会抛出以下错误：

Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLButtonElement'
    |     property '_qc_' -> object with constructor 'Object'
    --- property '$element$' closes the circle
    at JSON.stringify (<anonymous>)

解决方案 #

1. 用隐藏input字段传递额外参数（最贴合原生表单逻辑） #

直接在表单里加隐藏的<input>，把额外参数设为它的value，提交表单时这些参数会自动被纳入formData：

<div class="regis-form-trigger">
  <input type="text" name="phone" ref={phoneInput} onInput$={onInputNr} />
  <!-- 固定值额外参数 -->
  <input type="hidden" name="source" value="mobile" />
  <!-- 动态值额外参数，比如从组件状态里取 -->
  <input type="hidden" name="timestamp" value={Date.now()} />
  <button class="submit-btn" type="submit" ref={submitBtn} disabled></button>
</div>
</Form>

这样提交后，action里的formData就能直接拿到phone、source、timestamp这几个参数，不需要改任何action代码。

2. 在action中直接注入额外参数 #

如果额外参数是后端上下文相关的（比如环境变量、请求头信息），可以直接在action函数里给formData加字段：

export const useRegFormAction = globalAction$(async (formData: JSONObject, { env }: RequestEventAction): Promise<any> => {
  // 注入额外参数
  formData['appVersion'] = env.APP_VERSION;
  formData['clientIp'] = env.REQUEST_IP;
  
  console.log('# formData: ', formData);
  // 后续处理逻辑...
});

3. 修复普通form标签的循环引用错误 #

换成普通form标签时的报错，是因为按钮绑定了Qwik的ref={submitBtn}，这个ref会把DOM元素对象传入表单提交数据，导致JSON序列化时出现循环引用。解决办法：

• 如果不需要操作按钮DOM，直接去掉ref={submitBtn}
• 如果必须保留ref，确保表单提交逻辑不会把ref对象混入提交数据中（比如不要在表单元素上绑定非表单数据的ref到提交相关逻辑）

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