无法将Active类添加到React Map函数中的组列表项

debugcn 发表于 Dev

赛义德（Sayed Sajjad Haidari）

嗨，请帮我解决这个问题，当我将鼠标悬停在react map（）渲染的组列表项目上时，它将为所有项目设置活动类，而不是我选择的项目。这是代码：

 const LeftPanel = (props) => {

 let [initState, setInitState] = useState();
 let [addActive, setAddActive] = useState();


 fetch('https://jsonplaceholder.typicode.com/todos')
 .then(response => response.json())
 .then(json => setInitState(json));


 const hoverOn = () =>{
 setAddActive(true);
} 

 const hoverOff = () =>{
 setAddActive(false);
}  


return ( 
    
        <div>
            <div>
                <div className="list-group" id="list-tab" role="tablist">
                    {initState && 
                    initState.map(item =>(    
                        <Link className={addActive ? 'list-group-item list-group-item-action active' : 'list-group-item list-group-item-action'} 
                        to="#"  onMouseEnter={hoverOn} onMouseLeave={hoverOff} key={item.id}
                        >
                          {item.title}  
                        </Link>
                    ))
                    }
                </div>
            </div>
        </div>
 );

}

孔功祖（Kaung Khant Zaw）

您需要设置一些内容来知道要添加哪个项目的类，这里是 item.id

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  let [initState, setInitState] = useState();
  let [addActive, setAddActive] = useState({
    class: null,
    index: null
  });

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((json) => setInitState(json));
  }, []);

  const hoverOn = (e) => {
    setAddActive({
      index: parseInt(e.currentTarget.dataset.id),
      show: true
    });
  };

  const hoverOff = (e) => {
    setAddActive({
      index: parseInt(e.currentTarget.dataset.id),
      show: false
    });
  };

  return (
    <div>
      <div>
        <div className="list-group" id="list-tab" role="tablist">
          {initState &&
            initState.map((item, i) => (
              <div
                className={
                  addActive.index === item.id && addActive.show
                    ? "list-group-item list-group-item-action active"
                    : "list-group-item list-group-item-action"
                }
                onMouseEnter={hoverOn}
                onMouseLeave={hoverOff}
                key={item.id}
                data-id={item.id}
              >
                {item.title}
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

密码箱

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。