使用Reactjs在列表中添加和删除类

import React, { Component } from 'react';

class ListComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['item1', 'item2', 'item3'], // 初始列表数据
    };
  }

  handleAddItem = () => {
    const newItem = 'new item';
    this.setState(prevState => ({
      list: [...prevState.list, newItem], // 添加新项到列表
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.handleAddItem}>添加项</button>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={index} className="list-item">{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ListComponent;

import React, { Component } from 'react';

class ListComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['item1', 'item2', 'item3'], // 初始列表数据
    };
  }

  handleDeleteItem = (index) => {
    this.setState(prevState => ({
      list: prevState.list.filter((item, i) => i !== index), // 过滤掉要删除的项
    }));
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={index}>
              {item}
              <button onClick={() => this.handleDeleteItem(index)}>删除</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ListComponent;