ReactJS Hooks 表单提交时hidden类型campaignid字段为空问题求助

问题根因 #

• 外部脚本直接操作DOM修改hidden输入框的value时，不会触发React的onChange事件，你定义的setCampaignid从未执行，所以campaignid状态一直保持初始化的空值，提交时自然读取为空。
• 你当前的Input组件未绑定value={campaignid}属性，没有和React状态形成双向绑定，状态和输入框的值本身就不同步。

解决方案 #

方案1（最推荐）：组件内部直接读取URL参数 #

完全抛弃外部脚本的参数获取逻辑，在React组件内部直接读取地址栏参数，自己控制状态流转，避免跨脚本的状态同步问题：

import { useState, useEffect } from 'react'

// 状态定义不变
const [campaignid, setCampaignid] = useState('')

useEffect(() => {
  // 读取URL参数
  const searchParams = new URLSearchParams(window.location.search)
  const cid = searchParams.get('campaignid') ?? ''
  setCampaignid(cid)
}, [])

// 调整Input为受控组件，绑定value
<Input 
  name="campaignid" 
  type="hidden" 
  value={campaignid}
/>

后续提交直接读取campaignid状态即可，不需要再监听onChange事件。

方案2：保留外部脚本逻辑，监听DOM变化同步状态 #

如果必须保留现有外部脚本修改输入框的逻辑，可以用MutationObserver监听输入框的value属性变化，同步更新React状态：

import { useState, useEffect, useRef } from 'react'

const [campaignid, setCampaignid] = useState('')
const campaignInputRef = useRef(null)

useEffect(() => {
  const inputDom = campaignInputRef.current
  if (!inputDom) return
  // 监听输入框value属性变化
  const observer = new MutationObserver(() => {
    setCampaignid(inputDom.value)
  })
  observer.observe(inputDom, { 
    attributes: true, 
    attributeFilter: ['value'] 
  })
  // 组件卸载时销毁监听
  return () => observer.disconnect()
}, [])

<Input 
  name="campaignid" 
  type="hidden" 
  ref={campaignInputRef}
  value={campaignid}
/>

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