为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

Cats萌萌 2022-09-23 16:49:10

我得到了一个简单的无状态父组件,其中显示了一个有状态子组件列表。每个单独的子组件都表示一个列表项,其活动状态可以切换(真/假)。活动列表项将变为绿色,并显示关闭(时间)。


现在,我的问题是当一个项目被选中(活动)并且我单击另一个项目时,两者都变得活跃,正如预期的那样。但是,我希望取消选择/停用上一个项目,以便一次只能激活一个项目。我尝试将状态提升到父级并将其作为道具传递下来,但这显然会导致当我单击一个项目时,每个项目都处于活动状态。如何实现此目的?


以下是代码片段。


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;


查看完整描述

2 回答

?
12345678_0001

TA贡献1467条经验 获得超5个赞

我将单击处理程序向上移动一个级别:


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>

    );

}


查看完整回答
反对 回复 2022-09-23
?
慕斯709654

TA贡献1523条经验 获得超5个赞

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


具有类组件的示例


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>

    );

}


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信