表单数据未填写到 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))