React Js 如何实现列表内指定项的删除功能

• 原有代码中的星期列表是定义在render方法内的常量，无法动态修改触发视图更新，首先需要将列表数据存入组件的state中，依托React状态驱动视图的特性实现删除效果。
• 新增删除处理函数，通过filter方法过滤掉需要删除的项后调用setState更新状态即可自动刷新列表。
• 给每个Delete按钮绑定onClick事件传递当前项的标识，同时给map渲染的li元素添加唯一key属性，避免React渲染警告。

注意：如果你的列表可能存在重复值，建议使用索引作为删除和key的标识，避免误删多条数据

完整修改后代码如下：

class Weekdays extends React.Component {
  constructor(props) {
    super(props);
    // 把列表数据存入state
    this.state = {
      listItem: ["sun", "mon", "tue", "wed", "thur", "fri", "sat"]
    };
    // 绑定方法this指向
    this.handleDelete = this.handleDelete.bind(this);
  }

  // 删除处理方法
  handleDelete(targetDay) {
    // 过滤掉要删除的项，生成新数组
    const updatedList = this.state.listItem.filter(day => day !== targetDay);
    // 更新state触发视图重新渲染
    this.setState({
      listItem: updatedList
    });
  }

  render() {
    return (
      <ul>
        {this.state.listItem.map((day) => (
          {/* 必须加唯一key */}
          <li key={day}>
            {day} 
            {/* 绑定点击事件，传入当前项的day值 */}
            <button onClick={() => this.handleDelete(day)}>Delete</button>
          </li>
        ))}
      </ul>
    );
  }
}
ReactDOM.render(<Weekdays />, document.getElementById("root"));

内容的提问来源于stack exchange，提问作者Shekhar