亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何獲取表單數據?

如何獲取表單數據?

慕工程0101907 2022-06-05 10:58:26
我正在編寫一個 React 應用程序,當嘗試將登錄表單數據發送到后端時,它是空的。// Login component classsubmitLoginForm = (event) => {    event.preventDefault();    const target = event.target;    const data = new FormData(target);    // data is empty, but I need it to contain the form data.    // ...}render() {    return (        <div>            <form onSubmit={this.submitLoginForm}>                <input type="hidden" name="csrfmiddlewaretoken" value={Cookies.get("csrftoken")} />                <label htmlFor="username">Username: </label>                <input id="username" name="username" type="text" />                <label htmlFor="password">Password: </label>                <input id="password" name="password" type="password" />                {this.state.errorText}                <input type="submit" value="submit" />            </form>        </div>    );}編輯:雖然 FormData 對象確實有表單數據,但將其傳遞給 fetch 請求無法傳遞任何數據,而只是發送一個空的 JSON 對象。JSON.stringify 也會出現同樣的結果。如何將數據作為 JSON 對象獲???
查看完整描述

2 回答

?
素胚勾勒不出你

TA貢獻1827條經驗 獲得超9個贊

TBH 我沒有多少運氣FormData能很好地處理反應。onSubmit您可以訪問表單事件對象的表單字段。


// Login component class

submitLoginForm = (event) => {

  event.preventDefault();

  const target = event.target;

  const data = {

    username: target.username.value,

    password: target.password.value,

  };

  // JSON.stringify(data) in request body

}


查看完整回答
反對 回復 2022-06-05
?
蠱毒傳說

TA貢獻1895條經驗 獲得超3個贊

不確定這是不是理想的方法,但你可以formData.entries()像這樣建立一個 pojo,然后從那里做你需要做的任何事情。


const submitLoginForm = e => {

  e.preventDefault();

  const fd = new FormData(e.target);

  const formObj = [...fd.entries()].reduce((acc, [key, value]) => ({...acc, [key]: value}), {});

  console.log(formObj);

}

<form onsubmit="submitLoginForm(event)">

  <label htmlFor="username">Username: </label>

  <input id="username" name="username" type="text" />


  <label htmlFor="password">Password: </label>

  <input id="password" name="password" type="password" />

  <input type="submit" value="submit" />

</form>


查看完整回答
反對 回復 2022-06-05
  • 2 回答
  • 0 關注
  • 94 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號