表单数据不填写 React

Question

我有一个非常基本的项目，在这个项目中我有一个简单的表单。当我提交此表单时，我将我的数据放入带有附加方法的表单数据中，之后当我在控制台中记录我的表单数据时，它是一个空对象，我很想知道为什么会这样这是我的代码

import styles from '../styles/Home.module.css'
import {useState} from "react";

export default function Home() {
    const [inputs, setInputs] = useState({
        name: '',
        mobile: ''
    });
    const changeHandler = (e) => {
        setInputs(prev => {
            const cloneState = {...prev};
            cloneState[e.target.name] = e.target.value;
            return cloneState;
        });
    }

    const clickHandler = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('name', inputs.name);
        formData.append('mobile', inputs.mobile);
        console.log(formData, 'FD');
    }
    return (
        <div className={styles.container}>
            <form>
                <input type="text" onChange={changeHandler} name='name'/>
                <input type="text" onChange={changeHandler} name='mobile'/>
                <button type='submit' onClick={clickHandler}>Submit</button>
            </form>
        </div>
    )
}

先谢谢大家

Answer 1

如果您在控制台中记录 formData 对象，它将记录 formData 对象。您需要调用 'get' 方法来获取值。如果您想从 formData 对象中获取 json，请使用以下代码。

console.log(Object.fromEntries(formData))

Answer 2

FormData的实例类型不是一个普通的JS对象，而是一个FormData对象，因此您不能直接登录到控制台。

要查看其条目，您可以这样做：

[...formData.entries()].forEach(e => console.log(e))

Answer 3

与从 formData 获取值相关的问题。您可以使用 get() 方法或 getAll() 从 formData 获取数据，以便获取数组中具有相同名称的所有值。要从 formData 获取所有值，您可以像这样使用 for...of 循环。

for (let value of formData.values()) {
        console.log(value);
    }

希望这对您有所帮助。谢谢）

表单数据不填写 React

Form data doesn't fill in React

javascript

forms

form-data

reactjs

next.js