如何使用 React Hooks 切换数组中的对象我想使用按钮 className“card-button”切换 className“.card like”和“card dislike”

Question

const [movies, setMovies] = useState([
  {
    id: "1",
    title: "Oceans 8",
    category: "Comedy",
    likes: 4,
    dislikes: 1
  },
  {
    id: "2",
    title: "Midnight Sun",
    category: "Comedy",
    likes: 2,
    dislikes: 0
  },
  {
    id: "3",
    title: "Les indestructibles 2",
    category: "Animation",
    likes: 3,
    dislikes: 1
  }
]);

const [active, setActive] = useState(false);
const toggleActive = index => {
  setActive(!active);
};

return (
  <div className="containe">
    {movies.map((movieDetails, index) => {
      // console.log(index)

      return (
        <div className="card">
          <div className="card-body">
            <button className="btn-fermer" onClick={() => removeItem(index)}>
              Close
            </button>

            <h6 className="card-id" key={movieDetails.id + index}>
              ID:{movieDetails.id}
            </h6>
            <p className="card-title">
              <strong>{movieDetails.title}</strong>
            </p>
            <p className="card-category">Catégorie: {movieDetails.category}</p>
            <p className="card-like active">
              {" "}
              Like count :{movieDetails.likes}
            </p>
            <p className="card-dislike active">
              {" "}
              Like count :{movieDetails.dislikes}
            </p>
          </div>
          <button className="card-button" onClick={() => toggleActive(index)}>
            Toggle Likes and Dislikes
          </button>
        </div>
      );
    })}
  </div>
);

Answer 1

试试这个：

只需将大括号放在 className 属性中，并传递一个 ternay 表达式，以根据活动状态在您想要的两个类之间切换，就像这样：

const [active, setActive] = useState(false);
const toggleActive = () => setActive(prevState => !prevState);

return (
  <div className="containe">
    {movies.map((movieDetails, index) => {
      // console.log(index)

      return (
        <div className="card">
          <div className="card-body">
            <button className="btn-fermer" onClick={() => removeItem(index)}>
              Close
            </button>

            <h6 className="card-id" key={movieDetails.id + index}>
              ID:{movieDetails.id}
            </h6>
            <p className="card-title">
              <strong>{movieDetails.title}</strong>
            </p>
            <p className="card-category">Catégorie: {movieDetails.category}</p>
            <p className={active ? "card-dislike active":"card-like active"}>
              Like count :{movieDetails.likes}
            </p>
            <p className={active ? "card-like active":"card-dislike active"}>
              Like count :{movieDetails.dislikes}
            </p>
          </div>
          <button className="card-button" onClick={toggleActive}>
            Toggle Likes and Dislikes
          </button>
        </div>
      );
    })}
  </div>
);