如何将对象推送到状态对象数组,使用 Typescript 做出反应
我需要维护存储在状态对象中的对象数组。基本上,每当我单击“添加”按钮时,我都需要将每个对象推送到此数组。这基本上应该将此对象存储在数组中。
此外,当我尝试提交时,我无法获取正确的值? 我哪里做错了?
基本上我想要的结构是:
users= [
{"name":"xxx","email":"yyy","phone":"656"},
{"name":"yyy","email":"xxx","phone":"55"}
];
import * as React from 'react';
interface IState{
users : Account[];
}
interface Account{
name: string;
email: string;
phone: string
}
export default class App extends React.Component<{},IState> {
constructor(props:any){
super(props);
this.state= {
users: []
}
}
handleChange = ( event: React.ChangeEvent<HTMLInputElement>) => {
this.setState({
users:{
...this.state.users,
[event.target.name]:event.target.value
}
})
}
onAdd = () => {
this.setState((prevState) => ({
users: [...prevState.users],
}));
console.log(this.state.users); // Unable to get the proper info
}
render(){
<React.Fragment>
<form onSubmit={this.onAdd}>
<input type="text" onChange={(e:any) => this.handleChange(e)} name={"name"} />
<input type="text" onChange={(e:any) => this.handleChange(e)} name={"email"} />
<input type="text" onChange={(e:any) => this.handleChange(e)} name={"phone"} />
<button type="submit">Add</button>
</form>
</React.Fragment>
}
}
按如下方式更新
onAdd
,因为
setState
方法异步更新状态,因此您无法在调用它之后立即获取状态,但您可以使用
setState
方法中的回调作为第二个参数来实现,该方法在方法更新状态后调用
onAdd = () => {
this.setState((prevState) => {
const newUser = {}
return {
users: [...prevState.users, newUser],
}
}, () => {
console.log(this.state.users)
});
}
需要纠正的事项:-
1)您仅对一个用户以及所有用户使用一个状态变量
users
。因此,创建两个状态变量,一个用于临时存储用户数据,一个
users
变量用于存储所有用户数据。
2) 您尝试在 setState 之后访问
console.log(this.state.users);
,但它不在回调中,setState 是异步的,它应该在 setState 的回调中。
3) 当用户提交表单时,页面会刷新,这是应用程序的默认行为,我们需要
e.preventDefault();
来覆盖此行为。
4) 对各个输入文本框使用状态,以便您可以对字段应用验证等。
import * as React from "react";
import { render } from "react-dom";
interface IState {
users : Account[],
user: Account
}
interface Account{
name: string;
email: string;
phone: string
}
class App extends React.Component<{}, IState> {
constructor(props: any) {
super(props);
this.state = {
users: [],
user: {name: '', email:'', phone: ''}
}
}
handleChange = (event: React.FormEvent<HTMLInputElement>) => {
this.setState({
user: {
...this.state.user,
[event.currentTarget.name]: event.currentTarget.value
}
});
};
onAdd = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
this.setState(
{
users: [...this.state.users, this.state.user],
user: {name:'', email: '', phone: ''}
},
() => {
console.log("updated state", this.state.users);
}
);
};
public render() {
const { name, email, phone } = this.state.user;
return (
<form onSubmit={this.onAdd}>
<input type="text" onChange={this.handleChange} value={name} name="name" />
<input type="text" onChange={this.handleChange} value={email} name="email" />
<input type="text" onChange={this.handleChange} value={phone} name="phone" />
<button type="submit">Add</button>
</form>
);
}
}
render(<App />, document.getElementById("root"));
改进领域 - 您可以声明字段数组,如 fields = ['name', 'phone', 'email'] 并在渲染函数中映射,这样您只需编写一次表单,就可以添加任意字段。
希望有帮助!!!
您不需要 handleChange,在 onAdd 中从事件中获取所有输入值,将它们放入对象中(如 {name: event.target.form.elements.name.value ...} 并将其设置在 users 中(这将是一个数组)
export default class App extends React.Component{
constructor(props:any){
super(props);
this.state = {
users: []
}
}
onAdd = (event) => {
const user = {
name: event.target.form.elements.name.value,
email: event.target.form.elements.email.value,
phone: event.target.form.elements.phone.value
}
this.setState({
users: [...this.state.users, user]
});
}
render(){
<React.Fragment>
<form onSubmit={this.onAdd}>
<input type="text" name="name" />
<input type="text" name="email" />
<input type="text" name="phone" />
<button type="submit">Add</button>
</form>
</React.Fragment>
}
}
然后如果您记录 this.state.users 您将获得所需的结构
users= [
{"name":"xxx","email":"yyy","phone":"656"},
{"name":"yyy","email":"xxx","phone":"55"}
];