使用 onClick 按其值对数组中的对象进行排序

Question

我想创建一个 function可用于 2 个onClick以在此数组中按title和genre.name名称对对象进行排序：

const movies = [
  {
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  },
  {
    title: "Rat Race",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Comedy" },
  },
  {
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
  },
]

到目前为止，我必须为每个onClick创建一个 function： onClick={titleSorted}和onClick={genreSorted} 。 但是我认为这不是一个好习惯，因为如果我在一个 object 中有 10 个键，那么一个文件中的类似代码就会太多。

但是，如果我使用所有onClick的参数创建一个 function ：

moviesSorted(item) => {}

那么我不能使用onClick={moviesSorted(title)}或onClick={moviesSorted(genre.name)}因为据我所知，它会在单击之前自动运行这些功能。

所以请帮我找到解决办法。 对此，我真的非常感激！

Answer 1

Function 传递给onClick必须是事件处理程序，实现为

function(event) {
  // ...
}

所以你在你的例子中，你可能想要

onClick={() => moviesSorted(title)}

// or 

onClick={() => moviesSorted(genre.name)}