從 ReactJS 中的對象數組中移除/刪除項目

Question

我希望在用戶單擊按鈕時刪除特定項目。 目前沒有“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;

如何從屏幕中刪除搜索到的員工或員工？

Answer 1

通過使用過濾器來做到這一點的一種好方法。

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}
/>