当我单击/激活另一项时，如何取消选择活动列表项？

Question

我有一个简单的无状态父组件，显示有状态子组件列表。每个单独的子组件代表一个列表项，其活动状态可以切换（真/假）。活动列表项变为绿色，并显示关闭（时间）。

现在，我的问题是，当选择一个项目（活动）并单击另一项目时，两者都会变为活动状态，正如预期的那样。然而，我想要的是取消选择/停用前一个项目，这样一次只能有一个项目处于活动状态。我尝试将状态提升到父级并将其作为道具传递下来，但这显然会导致当我单击一个项目时每个项目都处于活动状态。我该如何实现这一目标？

下面是代码片段。

import React, { Component } from "react";

class ListItem extends Component {
  state = {
    isActive: false,
  };

  onToggleSelect = () =>
    this.setState({
      isActive: !this.state.isActive,
    });

  render() {
    return (
      <li
        style={{ color: this.state.isActive && "green", cursor: "pointer" }}
        onClick={this.onToggleSelect}
      >
        Item number {this.props.item}
        {this.state.isActive && <span>&times;</span>}
      </li>
    );
  }
}

function List({ itemList }) {
  return (
      <div>
        <ul>
          {
            itemList.map(i => <ListItem key={i} item={i} />)
          }
        </ul>
      </div>
    );
}

List.defaultProps = {
  itemList: [...Array(10).keys()].map(x => x + 1),
};

export default List;

Answer 1

我将点击处理程序上移一个级别：

import React, { useState } from "react";

function ListItem({ item, isActive, handleClick }) {
    return (
      <li
        style={{ color: isActive && "green", cursor: "pointer" }}
        onClick={() => handleClick(item)}
      >
        Item number {item}
        {isActive && <span>&times;</span>}
      </li>
    );
}

function List({ itemList }) {
  const [activeListItem, setActiveListItem] = useState();

  const handleClick = (item) => activeListItem === item ? setActiveListItem() : setActiveListItem(item);

  return (
      <div>
        <ul>
          {
            itemList.map(i => <ListItem key={i} item={i} handleClick={handleClick} isActive={activeListItem === item} />)
          }
        </ul>
      </div>
    );
}