如何使用 [profile.js] 文件更新表单 React Js

Question

我正在研究 Reactjs 并使用 Nextjs 框架，现在我正在研究管理 面板并尝试更新用户配置文件，为此我创建了文件“[profile.js]”并传递了 userId 我试图在表单中获取用户信息，并且想更新表单意味着每当 用户点击“更新”然后信息应该通过 Axios 更新（Api 已经创建），但是我如何使用“表单提交”？换句话说，我如何在 nextjs 中获取表单/使用函数的值？ 这是我当前的代码

const Post = ({ post }) => {
    // want to get form data and .....further code
}

return (
    <>
         <form className="forms-sample" >
             <input
                 type="text"
                 className="form-control"
                 id="exampleInputName1"
                 placeholder="Title"
                 name="name"
                 value={Post.title}/> //not showing
             <button type="submit" className='btn btn-primary mr-2'>Submit</button>     
         </form>
    </>
);
    
export const getStaticProps = async ({ params }) => {
    const { data } = await Axios.get(`xxxxxxxxxxxxxxxxxxxxxx/getblogbyuserid/${params.slug}`);
    const post = data;
    return {
        props: {
            post,
        },
    };
};

export const getStaticPaths = async () => {
    const { data } = await Axios.get("xxxxxxxxxxxxxxxxxxxxxxxxxxxx/api/blogs");
    const posts = data.slice(0, 10);
    const paths = posts.map((post) => ({ params: { slug: post.id.toString() } }));
    return {
        paths,
        fallback: true,
    };
};

Answer 1

你可以这样做：

const submitHandler = (formData) => {
   // your code
}

<form className="forms-sample" onSubmit={submitHandler}>