ReactJS实现点击表单提交按钮时将采集数据存储为JSON格式

• 定位代码中绑定在<form>标签onSubmit属性上的提交处理函数，所有修改都在这个函数内部完成，不需要改动已写好的输入框绑定、状态初始化相关代码
• 第一行必加：阻止表单默认的页面刷新行为，否则点击提交后页面直接重载，所有数据和逻辑都会丢失
• 生成JSON：已通过onChange方法将两个输入框的实时输入值同步到组件状态this.state中，直接使用JS原生方法JSON.stringify()将状态内的员工字段转为JSON字符串即可，不需要手动从DOM节点读取输入值
• 完成存储：根据实际使用场景选择对应存储方式，无需安装第三方工具

可直接复用的提交方法代码 #

// 类组件内部的提交处理方法，替换原有仅含弹窗的逻辑即可
handleSubmit = (e) => {
  // 阻止表单默认刷新行为，必加
  e.preventDefault()

  // 从state取已采集的员工数据，生成JSON字符串
  const employeeJson = JSON.stringify({
    EmpNumber: this.state.EmpNumber,
    EmpName: this.state.EmpName
  })

  // 按需选择对应存储逻辑：
  // 1. 浏览器本地永久存储（关闭页面后数据仍可读取）
  localStorage.setItem('employeeInfo', employeeJson)

  // 2. 校验生成的JSON格式是否正确，可在浏览器控制台查看打印结果
  console.log('生成的员工JSON数据：', employeeJson)

  // 原有弹窗提示可保留，完成提交后给用户操作反馈
  alert('员工表单提交完成，生成的JSON数据：\n' + employeeJson)
}

实操说明 #

• 全程使用浏览器、React原生支持的能力，无需引入任何第三方依赖
• 提交时从state获取的内容为用户实时输入的最新值，无需重复编写读取输入框内容的逻辑
• 后续读取已存储的JSON数据时，使用JSON.parse()方法即可将字符串转回可直接操作的JS对象
• 若需将JSON数据传递给后端接口，直接将生成的employeeJson字符串放入接口请求的请求体中即可，无需额外格式转换

内容的提问来源于stack exchange，提问作者Krishnan S