ReactJS Hooks：表单提交空白值

Question

我有一个带有hidden input 的表单，名为campaingid，它通过外部脚本从 URL 参数接收数据。

查看输入代码：

<Input name="campaignid" type="hidden" onChange={e => setCampaignid(e.target.value)} />
                

一切正常...value 字段正在正确填写 URL 参数。

我的问题在以下步骤激增...当我提交表单时，campaingid 值消失了。

查看我的变量状态：

const [campaignid, setCampaignid] = useState('')

当我提交表单时，它会在campaigning 检索空白数据

我认为onChange事件的使用有误。想...

有人可以帮助我吗？

完整代码：https://github.com/stridesdigital/ac-chakraUI-angelina-cortinas/blob/main/src/components/Forms/heroform.tsx

Answer 1

将您的submit 函数移到useState 的下方

钩子的第一条规则：

仅在顶层调用 Hooks https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

如果它不起作用，则将submit 包装在useCallback 中 参考：https://reactjs.org/docs/hooks-reference.html#usecallback