在 React 中单击时获取元素的书籍属性

Question

我有一个地图函数，可以将图书列表输出到我的 Books 组件。在 map 函数返回的每个 li 上，我都有一个调用函数 openBook 的 onClick 事件处理程序，此函数只是将被单击的书的信息显示到屏幕上的 div。我的问题是，出于某种原因，当我将参数传递给 openBook 函数时，它只传递最后一个 li 元素的标题和作者，它似乎运行函数甚至没有点击书本。

当我点击某本书时，如何将标题和作者参数传递给创建的 div？

这是我的代码和我尝试过的代码。

Books.js

function Books() {

  const {books} = useContext(BookContext) //{books} here is the array (API) with all books inside but as a state in the BookContext file

  function openBook(title, author) {
    const bookview = document.createElement('DIV')
    if(document.body.contains(document.querySelector('.bookview'))) {
      document.body.removeChild(document.querySelector('.bookview'))
    }
    bookview.innerHTML = '<i class="fas fa-times close"></i> <h4>'+info+'</h4>'
    bookview.classList.add('bookview')
    document.body.appendChild(bookview)

    document.querySelector('.close').addEventListener('click', function() {
      document.body.removeChild(document.querySelector('.bookview'))
    })
  }

  return (
    <>
      <div className="bookshelf">
        <ul>
        {
            books.map(book => {
              return <li onClick={openBook(book.title, book.author)}>{book.title} <span>{book.author}</span><i class="fas fa-bookmark"></i></li>
            })
          }
        </ul>
      </div>
    </>
  )

}

BookContext（只有一些书籍信息）

const [books, setBooks] = useState([
{
  id: 1,
  title: "Digital Fortress",
  author: "Dan Brown"
},
{
  id: 2,
  title: "Origin",
  author: "Dan Brown"
},
{
  id: 3,
  title: "The Lord Of The Rings",
  author: "J.R Tolkien"
},
{
  id: 4,
  title: "The Bourne Identity",
  author: "Robert Ludlum"
}
])

Answer 1

你必须这样修改onClick

<li onClick={() => openBook(book.title, book.author)}><span>{book.author}</span><i class="fas fa-bookmark"></i></li>

因为按照您 returned 的方式，函数将在 onLoad 本身执行，并且 return 值将分配给 onClick。

但是你实际需要的是li的onClick需要执行的函数

在 React 中单击时获取元素的书籍属性

Get book properties of element on click in React

javascript

reactjs

react-context