将表单数据序列化为 json 反应答案

【问题标题】：Serialize form data to json react将表单数据序列化为 json 反应
【发布时间】：2017-12-01 11:27:43
【问题描述】：

如何在 react 中序列化数据？

<form method="post" action="/insert" onSubmit={(e)=>this.addMysql(e)}>
    <label>Username</label>
    <input type="text" id="username" name="nameUser"/>
    <label>Password</label>
    <input type="text" id="password" name="passs"/>
    <button type="submit" type="submit">Dodaj</button>
</form>

这是我的功能

addMysql(event){
    console.log(event.targe) //this outputs an empty form
    event.preventDefault();
}

我不想使用状态。只需 onSubmit 将所有表单数据发送到 AddMysql

https://medium.com/@snirlugassy/generic-input-handler-with-react-js-44a97e22cd0d

感谢 Sag1v

【问题讨论】：

"我不想使用 State" - 那为什么要使用 react？
你知道我怎么做这个setStateVal(e){ this.setState({ e.target.name:e.target.value }) }我不想为每个输入做函数来改变状态我想为每个输入做一个函数
类似this?
Sag1v 这个作品谢谢

标签： javascript json forms reactjs events

【解决方案1】：

我建议你使用states，因为那是 Reacty 方式。如果没有，我可能会提出一些建议。

通常我会建议使用FormData API，但 IE 和旧版浏览器不支持它。

我认为 this answer 应该让你继续前进，因为它是 serialize 的纯 JS 版本。

如果你使用的是 jQuery，最后serialize，我认为你不是或者你不应该这样做。

【讨论】：

【解决方案2】：

//So, here's a simple trick i use to get this done:
//Using React Hook

    

const [data, setData] = useState({});
//the create an onInputChange function for the Inputs this way
const onInputChange = async e =>{
  const {name, value} = e.target;
  //check to validate if entry is not a number
  if(isNaN(name)){
    data[name] = value;
    
    //somehow update data
    setData({...data})
  }
}

【讨论】：