将表单数据序列化为json做出反应

时间:2017-12-01 11:27:44

标签: javascript json forms reactjs events

如何在反应中序列化数据?

<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();
}

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

https://github.com/iliaal/php_excel

感谢Sag1v

2 个答案:

答案 0 :(得分:1)

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

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

我认为this answer应该让你前进,因为它是serialize的简单JS版本。

Finnally serialize如果您使用 jQuery ,我认为您不是,或者您不应该这样做。

答案 1 :(得分:0)

//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})
  }
}