从 ReactJS 中的对象数组中删除/删除项目

如何解决从 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}
/>