单击另一个列表项时删除选择

Question

我正在映射一组对象，如下所示

<div>
  {categoryArray.map(category => <DFCard  category={category} key={category.id}/>)}
</div>

DFC卡

      <div className="cat_div" id={category.id} onClick={() => this.selectCategory(category.id)}>
          <i className={`${category.icon} fontawesome vertical_center setting_icon`}/>
          <span className="cat_lbl vertical_center">{category.name}</span>
          {this.state.selectedId === category.id && 'selected'}
      </div>


     selectCategory(id) {
        this.setState({
          selectedId: id
        })
    }

我正在尝试在我单击的项目上显示selected。单击另一个列表项时，我的方法不会删除 selected 标签。我该如何解决这个问题？

Answer 1

试试这个

 selectCategory(id) {
          let oldSelected = this.setState.selectedId;
          oldSelected.push(id)
          this.setState({selectedId: oldSelected})
    }

{this.state.selectedId && this.state.selectedId.indexOf(category.id) > -1  && 'selected'}