英文:
How to update state of a nested object using useState with data collected from a React form?
问题
我是新手使用React。我试图创建一个简单的用户注册表单。我在使用useState hook，其中初始状态是一个嵌套对象。如何更新用户对象中的地址字段。
我的AddUser组件正在更新名字和姓氏字段，但在表单中输入街道和城市时，它不更新地址字段，而是将它们添加为新值。
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
export default function AddUser() {
let navigate = useNavigate();
const [user, setUser] = useState({
firstName: "",
lastName: "",
address: {
street: "",
city: "",
}
});
const onInputChange = (e) => {
setUser({ ...user, [e.target.name]: e.target.value });
}
const onSubmit = async (e) => {
e.preventDefault();
await axios.post("http://localhost:8080/registration/registerUser", user);
navigate("/");
};
const { firstName, lastName, address: { street, city } } = user;
return (
<div className="container">
<div className="row">
<div className="col-md-6 offset-md-3 border rounded p-4 mt-2 shadow">
<h2 className="text-center m-4">Register User</h2>
<form onSubmit={(e) => onSubmit(e)}>
<div className="mb-3">
<label htmlFor="firstName" className="form-label">
First Name
</label>
<input
type="text"
className="form-control"
placeholder="Enter your name"
name="firstName"
value={firstName}
onChange={(e) => onInputChange(e)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="lastName" className="form-label">
Last Name
</label>
<input
type="text"
className="form-control"
placeholder="Enter your lastname"
name="lastName"
value={lastName}
onChange={(e) => onInputChange(e)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="street" className="form-label">
Street
</label>
<input
type="text"
className="form-control"
placeholder="Enter your street"
name="address.street"
value={street}
onChange={(e) => onInputChange(e)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="city" className="form-label">
City
</label>
<input
type="text"
className="form-control"
placeholder="Enter your city"
name="address.city"
value={city}
onChange={(e) => onInputChange(e)}
required
/>
</div>
<button type="submit" className="btn btn-outline-primary">
Submit
</button>
<Link type="submit" className="btn btn-danger mx-2" to="/">
Cancel
</Link>
</form>
</div>
</div>
</div>
)
}
在这个代码中，我添加了用于更新地址字段的输入框，并相应地更新了user对象的嵌套属性。
英文:
I'm new to React. I'm trying to make a simple form to register a user. I'm using useState hook in which the initial state is a nested object. How to update address fields in user object.
My AddUser component is updating name, surname fields but when typing in the form street and city it doesn't update address fields, but adds them as new values.
import React, {useState} from "react";
import {Link, useNavigate} from "react-router-dom";
import axios from "axios";
export default function AddUser() {
let navigate = useNavigate();
const [user, setUser] = useState({
firstName:"",
lastName:"",
adres: {
street:"",
city:"",
}
});
const onInputChange=(e)=>{
setUser({...user, [e.target.name]: e.target.value});
}
const onSubmit = async (e)=>{
e.preventDefault();
await axios.post("http://localhost:8080/registration/registerUser", user);
navigate("/");
};
const {firstName, lastName, street, city} = user
return (
<div className="container">
<div className="row">
<div className="col-md-6 offset-md-3 border rounded p-4 mt-2 shadow">
<h2 className="text-center m-4">Register User</h2>
<form onSubmit={(e)=>onSubmit(e)}>
<div className="mb-3">
<label htmlFor="Firstname" className="form-label">
First Name
</label>
<input
type={"text"}
className="form-control"
placeholder="Enter your name"
name="firstName"
value={firstName}
onChange={(e)=>onInputChange(e)}
required
/>
<div className="mb-3">
<label htmlFor="Lastname" className="form-label">
Last Name
</label>
<input
type={"text"}
className="form-control"
placeholder="Enter your lastname"
name="lastName"
value={lastName}
onChange={(e)=>onInputChange(e)}
required
/>
</div>
</div>
<button type="submit" className="btn btn-outline-primary">
Submit
</button>
<Link type="submit" className="btn btn-danger mx-2" to="/">
Cancel
</Link>
</form>
</div>
</div>
</div>
)
}
答案1
得分: 0
const onInputChange = (e) => {
const { name, value } = e.target;
setUser((prevState) => ({
...prevState,
adres: {
...prevState.adres,
[name]: value
}
}));
};
这是HTML
<div className="mb-3">
<label htmlFor="street" className="form-label">
街道
</label>
<input
type="text"
className="form-control"
placeholder="输入您的街道"
name="street"
value={user.adres.street}
onChange={(e) => onInputChange(e)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="city" className="form-label">
城市
</label>
<input
type="text"
className="form-control"
placeholder="输入您的城市"
name="city"
value={user.adres.city}
onChange={(e) => onInputChange(e)}
required
/>
</div>
英文:
const onInputChange = (e) => {
const { name, value } = e.target;
setUser((prevState) => ({
...prevState,
adres: {
...prevState.adres,
[name]: value
}
}));
};
here is html
<div className="mb-3">
<label htmlFor="street" className="form-label">
Street
</label>
<input
type="text"
className="form-control"
placeholder="Enter your street"
name="street"
value={user.adres.street}
onChange={(e) => onInputChange(e)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="city" className="form-label">
City
</label>
<input
type="text"
className="form-control"
placeholder="Enter your city"
name="city"
value={user.adres.city}
onChange={(e) => onInputChange(e)}
required
/>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论