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

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 }) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; &nbsp; style={{ color: isActive && "green", cursor: "pointer" }}&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleClick(item)}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Item number {item}&nbsp; &nbsp; &nbsp; &nbsp; {isActive && <span>&times;</span>}&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; );}function List({ itemList }) {&nbsp; const [activeListItem, setActiveListItem] = useState();&nbsp; const handleClick = (item) => activeListItem === item ? setActiveListItem() : setActiveListItem(item);&nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemList.map(i => <ListItem key={i} item={i} handleClick={handleClick} isActive={activeListItem === item} />)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}

Answer 2

我认为您需要移动父组件中的状态，以便更好地管理每个项目的状态。具有类组件的示例import React, { Component } from "react";class ListItem extends Component {&nbsp; render() {&nbsp; &nbsp; const isActive = this.props.activeIndex === this.props.item;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; &nbsp; style={{ color: isActive && "green", cursor: "pointer" }}&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => this.props.onToggleSelect(this.props.item)}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Item number {this.props.item}&nbsp; &nbsp; &nbsp; &nbsp; {isActive && <span>&times;</span>}&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; );&nbsp; }}class List extends Component {&nbsp; state = {&nbsp; &nbsp; activeIndex: null,&nbsp; };&nbsp; onToggleSelect = (index) =>&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; activeIndex: index,&nbsp; });&nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.itemList.map(i => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ListItem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeIndex={this.state.activeIndex}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item={i}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onToggleSelect={onToggleSelect}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}