如何获取表单数据？

Question

我正在编写一个 React 应用程序，当尝试将登录表单数据发送到后端时，它是空的。

// Login component class

submitLoginForm = (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 对象获取？

Answer 1

TBH 我没有多少运气FormData能很好地处理反应。onSubmit您可以访问表单事件对象的表单字段。// Login component classsubmitLoginForm = (event) => {&nbsp; event.preventDefault();&nbsp; const target = event.target;&nbsp; const data = {&nbsp; &nbsp; username: target.username.value,&nbsp; &nbsp; password: target.password.value,&nbsp; };&nbsp; // JSON.stringify(data) in request body}

Answer 2

不确定这是不是理想的方法，但你可以formData.entries()像这样建立一个 pojo，然后从那里做你需要做的任何事情。const submitLoginForm = e => {&nbsp; e.preventDefault();&nbsp; const fd = new FormData(e.target);&nbsp; const formObj = [...fd.entries()].reduce((acc, [key, value]) => ({...acc, [key]: value}), {});&nbsp; console.log(formObj);}<form onsubmit="submitLoginForm(event)">&nbsp; <label htmlFor="username">Username: </label>&nbsp; <input id="username" name="username" type="text" />&nbsp; <label htmlFor="password">Password: </label>&nbsp; <input id="password" name="password" type="password" />&nbsp; <input type="submit" value="submit" /></form>