React中点击列表项时删除该条目的实现方法

嘿，这个问题涉及React单向数据流的核心原则，我来给你一步步讲清楚怎么实现：

首先要明确：React里子组件不能直接修改父组件传过来的props，所以删除逻辑得交给维护列表数据的父组件来处理，子组件只负责触发删除的动作就行。

第一步：让父组件维护列表状态并提供删除回调 #

假设你的父组件是这样的（你可以根据自己的实际情况调整）：

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    // 初始化列表数据的状态
    this.state = {
      items: ['苹果', '香蕉', '橙子']
    };
    this.handleDeleteItem = this.handleDeleteItem.bind(this);
  }

  handleDeleteItem(itemIndex) {
    // 注意：不要直接修改原state数组，要创建新数组再更新
    const updatedItems = [...this.state.items];
    updatedItems.splice(itemIndex, 1);
    this.setState({ items: updatedItems });
  }

  render() {
    // 把列表数据和删除回调传给List组件
    return (
      <div>
        <List items={this.state.items} onDelete={this.handleDeleteItem} />
      </div>
    );
  }
}

第二步：修改你的List组件来调用删除回调 #

现在调整你的List组件，让它接收onDelete回调，并在点击列表项时传递对应项的索引：

class List extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    // 从点击元素的data属性里拿到索引，然后调用父组件的删除回调
    const index = parseInt(e.currentTarget.dataset.index);
    this.props.onDelete(index);
  }

  render() {
    const list = this.props.items.map((x, index) => {
      return (
        <li 
          key={index} 
          onClick={this.handleClick}
          data-index={index} {/* 把索引存在元素的data属性里 */}
        >
          {index+1}. {x}
        </li>
      );
    });
    return (
      <ul className="list">
        {list}
      </ul>
    )
  }
}

更简洁的写法（可选） #

如果你觉得绑定handleClick有点麻烦，也可以直接在渲染li的时候用箭头函数传递索引，这样连handleClick函数都可以省掉：

class List extends Component {
  render() {
    const list = this.props.items.map((x, index) => {
      return (
        <li 
          key={index} 
          onClick={() => this.props.onDelete(index)} {/* 直接在这里调用回调并传索引 */}
        >
          {index+1}. {x}
        </li>
      );
    });
    return (
      <ul className="list">
        {list}
      </ul>
    )
  }
}

关键点提醒 #

• 永远不要直接修改this.state里的数组或对象，一定要创建副本再更新，这样React才能正确检测到状态变化并重新渲染组件。
• 遵循单向数据流：状态由父组件维护，子组件通过回调触发状态更新，这是React组件设计的核心思想之一。

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