Question

假设我正在映射如下所示的数组（我正在使用React）

 <div className="contact-display">                                    
          { this.contactList.length > 0 ? this.contactList.map(x => {
            return (
                <div className="contactlist-individual"> 
                   <img src={x["image"]}  width="40" height="40" /> 
                      <div className="contact-list-text">
                         <p className="contact-list-para-name">  {x["firstName"]} {x["lastName"]}</p>
                          <p className="contact-list-para-number"> {x["number"]} </p>
                      </div>
                    </div>
                   )}) : null
               }
 </div>

在这里，我的className: contactlist-individual的div具有以下CSS样式

.contactlist-individual {
    padding-left: 2%;
    display: flex;
    flex-direction: row;
    align-items: center; 
    border-bottom: 1px solid #E0E0E0;
    width: 100% !important;
}

（并且我将鼠标悬停时更改了background-color: #EEEEEE;），现在，当我选择/单击通过 array.map 映射的元素的任何时间时，我都希望将其颜色更改为白色表示绿色，此后，当有人单击该映射数组中的另一个元素时，我去将先前选择的元素设置回正常状态并更改了新的所选映射元素的颜色变绿

问题：有人可以帮我弄清楚我如何实现这一目标吗？

更新：我立刻想到了s，动态分配唯一ID（使用地图中的索引），然后使用onClick事件触发使用{{ 1}}（来自Vanila JS），然后更改此颜色。

有人可以建议一个更好的替代者吗？

Answer 1

解决该问题的一种方法是为列表中的每个项目都配备一个单击处理程序，并设置单击元素的活动状态。

混合使用直接使用javascript更新DOM并不是一个好主意。

toggleState = id => {
    let updatedList = this.state.contactList.map(x => {
      if (x.id === id) {
        x.active = true;
      } else {
        x.active = false;
      }

      return x;
    });

    this.setState({
      contactList: updatedList
    });
  };

示例-https://codesandbox.io/s/n9x5wyp0m0

更改阵列中所选项目的颜色

1 个答案: