反应 onClick 不改变项目的颜色答案

【问题标题】：React onClick not changing color of item反应 onClick 不改变项目的颜色
【发布时间】：2022-02-09 20:13:46
【问题描述】：

我正在尝试这样做，以便当我单击注释时，该项目应该被选中，然后它会改变背景颜色。我在 handleNoteClick 函数中有一个控制台日志语句，但它没有记录，这意味着该函数没有被调用

import React, { useState } from "react";
import { NoteItems } from "../noteDisplay/noteDisplay";
import NavItems from "./navItems";
const NoteNav = () => {
  const [notes, setNotes] = useState(NoteItems);

  const handleNoteClick = (id) => {
    const newNoteItems = notes.map((item) => {
      if (item.id === id) return { ...item, selected: !item.selected };
      else {
        return item;
      }
    });
    console.log("yekaj;lksndf");
    setNotes(newNoteItems);
  };
  return (
    <nav className="nav-bar">
      <div className="nav-content">
        {NoteItems.map((items) => (
          <NavItems key={items.id} items={items} onClick={handleNoteClick} />
        ))}
      </div>
    </nav>
  );
};
export default NoteNav;

笔记数组：

const NoteItems = [
  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: false
  },
  {
    id: uuidv4(),
    message: "asdfffffffffffffffffffffffffffffffffffffff",
    title: "e"
  },
  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: false
  },

  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: false
  },

  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: false
  },

  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: false
  },

  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: false
  },
  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: false
  },
  {
    id: uuidv4(),
    message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
    title: "New Note",
    selected: true
  }
];

我将数组的每个项目传递到的对象

import React, { useState } from "react";

const NavItems = ({ items }) => {
  return (
    <div
      className={
        items.selected ? "second-note-box-selected" : "second-note-box"
      }
    >
      <h1 className="note-title">{items.title}</h1>
      <p className="note-content">{items.message}</p>
    </div>
  );
};
export default NavItems;

【问题讨论】：

标签： css reactjs

【解决方案1】：

您的代码存在一些问题。

第一个也是最重要的是onClick 仅适用于原生 DOM 元素。你在这里<NavItems key={items.id} items={items} onClick={handleNoteClick}/> 所做的是将一个名为onClick 的道具传递给NavItems。

这不会触发点击，您需要在组件中使用它并将其附加到 div 例如。

第二个是关于你正在更新notes，但你在渲染期间没有使用它。

第三个可能是您正在迭代整个数组，只是为了更新一个值。您可以轻松地执行以下操作：

const handleNoteClick =(item) => {
  item.selected = !item.selected
  console.log('yekaj;lksndf')
  setNotes([...notes])    
}

并将 item 作为参数传递给handleNoteClick，如下所示：

<NavItems onClick={() => handleNoteClick(item) />

【讨论】：

newNoteItems 会是什么，因为它在更改后从 handleNoteClick 中删除
这应该是注释。我已经更新了答案。

【解决方案2】：

在这一行中，您将项目映射到 NavItem {NoteItems.map((items)=><NavItems key={items.id} items={items} onClick={handleNoteClick}/>)} onClick 只是指向该函数，并且您不能像 handleNoteClick(id) 这样传递指针，因为它的执行没有指向并且您没有将 id 传递给函数这样做我认为它应该工作 {NoteItems.map((items)=><NavItems key={items.id} items={items} onClick={()=>handleNoteClick(items.id)}/>)}

当然，您应该将自定义道具 onClick 传递给您的自定义组件原生 onclick

【讨论】：