Question

所以我对 React 有点陌生，我知道基础知识并尝试创建一个待办事项应用程序，但我不知道如何删除一个项目，还有什么办法可以改进这段代码？显然这还没有删除按钮，我尝试添加一个。我无法弄清楚如何更新状态以删除待办事项，因为待办事项已存储在状态中。这也是在 codepen 中，这就是为什么反应在一个文件中。谢谢！

html：<div id="html"></div>

CSS：

body {
  margin: 0;
}
* {
  box-sizing: border-box;
  font-family: sans-serif;
}
#html {
  background-color: lightblue;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  text-align: center;
  font-size: 30px;
}
.add-element {
  display: flex;
  justify-content: center;
}
li {
  list-style: none;
  padding: 10px;
  background-color: rgba(182, 66, 245, 0.3);
  font-size: 20px;
  margin: 10px;
  max-width: 300px;
  word-wrap: break-word;
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
}
li span {
  max-width: 250px;
}
ul {
  margin: 0;
  padding: 0;
}
input {
  border: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 10px 5px;
}
.add-btn {
  border: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
input:focus,
.add-btn:focus,
.remove:focus {
  outline: none;
  border: 1px solid black;
}

Javascript/React：

const App = () => {
  return (
    <div>
      <h1>Simple React List App</h1>
      <List />
    </div>
  );
};
class List extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.sendStateToParent = this.sendStateToParent.bind(this);
    this.state = { items: [], input: "" };
  }
  sendStateToParent() {
    console.log(this.state.items);
  }
  handleClick() {
    if (this.state.input === "") {
      alert("Add Something!");
    } else {
      console.log(this.state.input);
      this.setState(
        { items: [...this.state.items, this.state.input] },
        this.sendStateToParent
      );
      this.setState({ input: "" });
    }
    e.preventDefault();
  }
  handleChange(e) {
    this.setState({ input: e.target.value });
  }

  render() {
    return (
      <div>
        <div className="add-element">
          <input onChange={this.handleChange} value={this.state.input} />
          <button onClick={this.handleClick} class="add-btn">
            Add
          </button>
        </div>
        <ul>
          {this.state.items.map((item, i) => (
            <li key={i}>
              <span>{item}</span>    
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("html"));

Answer 1

您需要使用 filter 高阶数组函数 - MDN Reference。 handleDelete 函数中的代码。

  handleDelete(index) {
      const newTodos = this.state.items.filter((item, itemIndex) => {
        return itemIndex !== index
      })
     
    this.setState({items: newTodos})
  }

Solution

Answer 2

您可以使用过滤器创建一个新数组，该数组排除要删除的 item：

removeItem(item){
    this.setState({
        items: [...this.state.items.filter( itm => itm !== item)] 
    });
}

在反应中删除待办事项列表中的项目

2 个答案: