React 表单提交关键词意外触发刷新

今天遇到一个问题，我是一个搜索栏，点击查询的时候，直接触发的刷新页面，页面的参数因为刷新直接全没了，也查询不了数据

我看了一下控制台有个报错

Uncaught TypeError: elem.nodeName.toLowerCase is not a function

我用断点查询，发现我每次点击调用 Form 的 onFinish 事件，断点都进不来。

经过仔细查找，发现了奇点。

我的表单字段有一个 nodeName很巧这个这个字段和 DOM 原生属性 nodeName 重命了

在特定环境下，如果表单控件映射覆盖了表单实例上的同名属性，可能导致 form.nodeName 不再是字符串。

React 在事件提取时调用 elem.nodeName.toLowerCase()，因此会报错，直接导致了我项目的底层依赖，某些情况下开发环境报错会刷新

既然问题找到了，那就好改了，两个办法

一、From 增加一个 name 字段 避免内部控件映射产生裸字段冲突

<Form name="test" >

二、表单字段改成非原生同名字段，再在提交时映射回接口参数

- 表单字段：`nodeNameKeyword`
- 提交映射：`{ nodeName: nodeNameKeyword }`

避免使用与 DOM 原生属性同名的字段名（如 `nodeName`、`action`、`method` 等）

也是长了个教训