如何在单击/激活另一个活动列表项时取消选择另一个列表项？

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>

    );

}

Answer 2

我认为您需要移动父组件中的状态，以便更好地管理每个项目的状态。

具有类组件的示例

import React, { Component } from "react";

class ListItem extends Component {

  render() {

    const isActive = this.props.activeIndex === this.props.item;

    return (

      <li

        style={{ color: isActive && "green", cursor: "pointer" }}

        onClick={() => this.props.onToggleSelect(this.props.item)}

      >

        Item number {this.props.item}

        {isActive && <span>&times;</span>}

      </li>

    );

  }

}

class List extends Component {

  state = {

    activeIndex: null,

  };

  onToggleSelect = (index) =>

    this.setState({

      activeIndex: index,

  });

  return (

      <div>

        <ul>

          {

            this.props.itemList.map(i => (

                <ListItem

                  key={i}

                  activeIndex={this.state.activeIndex}

                  item={i}

                  onToggleSelect={onToggleSelect}

                />

            ))

          }

        </ul>

      </div>

    );

}