如何解决为什么我创建的每个元素都会被立即删除?
我正在制作一个联系人管理器(我已经将 App 作为类组件制作了,现在我将 App 作为功能组件制作)并且每次我创建一个元素时,它都会立即被删除,因为 removeElement 函数是立即致电...有人能告诉我为什么吗?
附言对不起我糟糕的英语...
this 是代码的链接
import "./styles.css";
import React from "react";
export default function App() {
const [people,setPeople] = React.useState([]);
const [person,setPerson] = React.useState({
name: "",age: "",email: ""
});
const handleChange = (e) => {
setPerson({ ...person,[e.target.name]: e.target.value });
};
const handleSubmit = () => {
if (person.name && person.age && person.email) {
const newPerson = { ...person,id: new Date().getTime().toString() };
setPeople([...people,newPerson]);
setPerson({ name: "",email: "" });
}
};
const removeItem = (id) => {
setPeople(people.filter((person) => person.id !== id));
};
const clearList = () => {
setPeople([]);
};
return (
<div className="container">
<h1>React Contact Manager</h1>
<div className="inputs">
<input
type="text"
name="name"
value={person.name}
onChange={handleChange}
/>
<input
type="number"
name="age"
value={person.age}
onChange={handleChange}
/>
<input
type="mail"
name="email"
value={person.email}
onChange={handleChange}
/>
</div>
<button onClick={handleSubmit}>Add</button>
<ul className="result">
{people.map((person) => (
<li key={person.id}>
<h4>{person.name}</h4>
<h6>{person.age}</h6>
<span>{person.email}</span>
<button onClick={removeItem(person.id)}>Remove</button>
</li>
))}
</ul>
<div className="clear">
<button onClick={clearList}>Clear</button>
</div>
</div>
);
}
解决方法
项目被删除,因为您在每次渲染时都执行此函数 - library(kableExtra)
data <- data.frame(Letters=LETTERS[1:10],Numbers=1:10)
data %>%
kbl() %>%
kable_paper("hover",full_width = F)
。
变化:
removeItem(person.id)
到:
<button onClick={removeItem(person.id)}>Remove</button>
或者创建一个函数并将其分配给按钮:
<button onClick={() => removeItem(person.id)}>Remove</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。