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

问题描述

我有一个地图功能，可将书籍列表输出到我的“书籍”组件。在由map函数返回的每个li上，我都有一个onClick事件处理函数，该函数调用了openBook函数，此函数只是将所单击的书的信息显示到屏幕上的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",{
  id: 3,title: "The Lord Of The Rings",author: "J.R Tolkien"
},{
  id: 4,title: "The Bourne Identity",author: "Robert Ludlum"
}
])

解决方法

您必须像这样修改onClick

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

因为返回的函数将在onLoad自身上执行，并且返回值将分配给onClick。

但是您真正需要的是需要在li的Click上执行的功能

context-api javascript reactjs reactjs