[英]How can I send data from this reactjs form to a database?
I want to link this small react project to a database, it's my first time so I don't really know anything about linking frontend to backend except that we need to use an APi.我想将这个小型反应项目链接到数据库,这是我的第一次,所以除了我们需要使用 APi 之外,我对将前端链接到后端一无所知。
import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
const ControlledInputs = () => {
const [person, setPerson] = useState({
firstName: "",
email: "",
age: "",
phoneNumber: "",
});
const [people, setPeople] = useState([]);
const handleChange = (e) => {
const name = e.target.name;
const value = e.target.value;
setPerson({ ...person, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
if (person.firstName && person.email && person.age && person.phoneNumber) {
console.log(person);
const newPerson = { ...person, id: uuidv4() };
setPeople((person) => {
return [...person, newPerson];
});
console.log(people);
} else {
console.log("error");
}
};
this where the form starts it's a simple form of 4 inputs return ( <> Name: Email: Age: Phone Number: add person {people.map((person) => { const { id, firstName, email } = person; return ( {firstName}这是表单开始的地方,它是 4 个输入的简单形式 return ( <> Name: Email: Age: Phone Number: add person {people.map((person) => { const { id, firstName, email } = person; return ( {名}
{email} {电子邮件}
); ); })} </> ); })} </> ); }; }; export default ControlledInputs;
If it is RESTful API method, use axios to patch the data.如果是RESTful API方法,使用axios打补丁。
https://github.com/axios/axios https://github.com/axios/axios
axios
.post("/user", {
firstName: person.firstName,
...
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.