[英]Remove/Delete an item from an Array of Objects in ReactJS
我希望在用户单击按钮时删除特定项目。 目前没有“removeItem”的代码,因为当我尝试时除了错误之外没有任何效果。 当按下“删除按钮”时,我也想从屏幕和对象数组中删除该项目。 我的代码如下:
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
term: "",
names: [
{ name: "David", profile: "dancer", description: "His dance is very good" },
{ name: "Kevin", profile: "singer", description: "He sings well" },
{ name: "Kristen", profile: "drummer", description: "He plays drum very awesome" }
],
filteredData: [{}]
};
}
render() {
let terms = "";
if (this.state.term) {
terms = this.state.term.toLowerCase();
}
return (
<div className="App">
<label>Search Employee: </label>
<input
type="text"
value={this.state.term}
id="searchEmp"
placeholder="Enter Name"
onChange={(event) => {
if (event.target.value.indexOf(" ") > -1) {
alert("Please don\'t enter space.");
this.setState({ term: "" });
return;
}
this.setState({ term: event.target.value });
}}
/>
<br />
<br />
{this.state.names &&
this.state.names
.filter((x) => x.name.toLowerCase().startsWith(terms))
.map((item) => {
return (
<div className="data-body">
<div>Name = {item.name}</div>
<div>Job Profile = {item.job_profile}</div>
<div>Description = {item.description}</div>
<input type="button" id="button" value="Delete"/>
<div>{<br></br>}</div>
</div>
);
})}
</div>
);
}
}
export default App;
如何从屏幕中删除搜索到的员工或员工?
通过使用过滤器来做到这一点的一种好方法。
import "./styles.css";
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
term: "",
names: [
{
name: "David",
profile: "dancer",
description: "His dance is very good"
},
{ name: "Kevin", profile: "singer", description: "He sings well" },
{
name: "Kristen",
profile: "drummer",
description: "He plays drum very awesome"
}
],
filteredData: [{}]
};
}
handleDelete = (e) => {
let nameToDelete = e.target.dataset.name;
this.setState((prevState) => {
return {
names: prevState.names.filter((person) => person.name !== nameToDelete)
};
});
};
render() {
let terms = "";
if (this.state.term) {
terms = this.state.term.toLowerCase();
}
return (
<div className="App">
<label>Search Employee: </label>
<input
type="text"
value={this.state.term}
id="searchEmp"
placeholder="Enter Name"
onChange={(event) => {
if (event.target.value.indexOf(" ") > -1) {
alert("Please don't enter space.");
this.setState({ term: "" });
return;
}
this.setState({ term: event.target.value });
}}
/>
<br />
<br />
{this.state.names &&
this.state.names
.filter((x) => x.name.toLowerCase().startsWith(terms))
.map((item) => {
return (
<div className="data-body">
<div>Name = {item.name}</div>
<div>Job Profile = {item.job_profile}</div>
<div>Description = {item.description}</div>
<input
type="button"
data-name={item.name}
value="Delete"
onClick={this.handleDelete}
/>
<div>{<br></br>}</div>
</div>
);
})}
</div>
);
}
}
export default App;
所以两个不同的部分是事件处理程序
handleDelete = (e) => {
let nameToDelete = e.target.dataset.name;
this.setState((prevState) => {
return {
names: prevState.names.filter((person) => person.name !== nameToDelete)
};
});
};
和按钮上的事件监听器:
<input
type="button"
data-name={item.name}
value="Delete"
onClick={this.handleDelete}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.