Javascript 单击时获取组件道具

嗨，我正在创建一个应用程序，用户可以在其中搜索一本书，并根据用户单击的书架将其放在书架上。目前，用户可以键入查询并显示许多结果。我希望用户在一本书的下拉列表中单击书架（在下拉列表中），选择该书并将其移动到该书架

我现在要做的是在用户单击下拉选项（即书架）时检索book对象。我想把这个book对象传递到一个api调用中。当用户单击特定书籍的下拉选项时，如何检索书籍对象？我知道这可能涉及事件冒泡。 我希望这个问题有意义

SearchPage.js

import React, { useEffect, useState } from 'react';
import { BsArrowLeftShort } from 'react-icons/bs';
import SearchBar from '../components/SearchBar';
import { search, update, getAll } from '../api/BooksAPI';
import Book from '../components/Book';

const SearchPage = () => {
  const [query, setQuery] = useState('');
  const [data, setData] = useState([]);

  const handleChange = (e) => {
    setQuery(e.target.value);
  };

  useEffect(() => {
    const bookSearch = setTimeout(() => {
      if (query.length > 0) {
        search(query).then((res) => {
          if (res.length > 0) {
            setData(res);
          } else setData([]);
        });
      } else {
        setData([]); 
      }
    }, 1000);
    return () => clearTimeout(bookSearch);
  }, [query]);

  const [shelfType, setShelfType] = useState('None');
  const [currentBook, setCurrentBook] = useState({});

  const handleShelfTypeClick = (e) => {
    setShelfType(e.target.value);
    console.log(e.target.parentElement.parentElement.parentElement);
  //here I want to retrieve the book object when the user clicks on a dropdown option (shelf)
  }; 

  return (
    <div>
      <SearchBar
        type="text"
        searchValue={query}
        placeholder="Search for a book"
        icon={<BsArrowLeftShort />}
        handleChange={handleChange}
      />
      <div className="book-list">
        {data !== []
          ? data.map((book) => (
              <Book
                handleShelfTypeClick={handleShelfTypeClick}
                book={book}
                key={book.id}
              />
            ))
          : 'ok'}
      </div>
    </div>
  );
};

export default SearchPage;

import React，{useffect，useState}来自“React”；
从'react icons/bs'导入{BsArrowLeftShort}；
从“../components/SearchBar”导入搜索栏；
从“../api/BooksAPI”导入{search，update，getAll}；
从“../components/Book”导入图书；
const SearchPage=（）=>{
const[query，setQuery]=useState（“”）；
const[data，setData]=useState（[]）；
常数handleChange=（e）=>{
setQuery（如target.value）；
};
useffect（（）=>{
const bookSearch=setTimeout（（）=>{
如果（query.length>0）{
搜索（查询）。然后（（res）=>{
如果（分辨率长度>0）{
setData（res）；
}else setData（[]）；
});
}否则{
setData（[]）；
}
}, 1000);
return（）=>clearTimeout（bookSearch）；
}，[查询]；
const[shelfType，setShelfType]=useState（'None'）；
const[currentBook，setCurrentBook]=useState（{}）；
const handleShelfTypeClick=（e）=>{
setShelfType（如目标值）；
日志（e.target.parentElement.parentElement.parentElement）；
//这里我想在用户单击下拉选项（书架）时检索book对象
}; 
返回(
{数据！=[]
？数据图（（书）=>(
))
：'ok'}
);
};
导出默认搜索页面；

Book.js

import React from 'react';
import PropTypes from 'prop-types';
import ButtonDropDown from './ButtonDropDown';

const Book = ({ book, handleShelfTypeClick }) => {

  return (
    <div className="book">
      <img
        src={book.imageLinks.thumbnail}
        alt={book.title}
        className="book-thumbnail"
      />
      <ButtonDropDown
        choices={['Currently Reading', 'Want to Read', 'Read', 'None']}
        getShelfType={handleShelfTypeClick}
      />
      <div className="book-title">{book.title}</div>
      <div className="book-authors">{book.authors}</div>
    </div>
  );
};

Book.propTypes = {
  handleShelfTypeClick: PropTypes.func.isRequired,
  book: PropTypes.shape({
    imageLinks: PropTypes.shape({
      thumbnail: PropTypes.string.isRequired,
    }),
    title: PropTypes.string.isRequired,
    authors: PropTypes.arrayOf(PropTypes.string),
  }).isRequired,

};

export default Book;

从“React”导入React；
从“道具类型”导入道具类型；
从“./ButtonDropDown”导入ButtonDropDown；
constbook=（{Book，handleShelfTypeClick}）=>{
返回(
{书名}
{book.authors}
);
};
Book.propTypes={
handleShelfTypeClick:PropTypes.func.isRequired，
书籍：PropTypes.shape({
imageLinks:PropTypes.shape({
缩略图：PropTypes.string.isRequired，
}),
标题：PropTypes.string.isRequired，
作者：PropTypes.arrayOf（PropTypes.string），
}).要求，
};
导出默认账簿；

ButtonDropDown.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { BsFillCaretDownFill } from 'react-icons/bs';

const ButtonDropDown = ({ choices, label, getShelfType }) => {
  const [active, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!active);
  };

  return (
    <div className="dropdown">
      <button
        type="button"
        className="dropbtn"
        onFocus={toggleClass}
        onBlur={toggleClass}
      >
        <BsFillCaretDownFill />
      </button>
      <div
        id="myDropdown"
        className={`dropdown-content ${active ? `show` : `hide`}`}
      >
        <div className="dropdown-label">{label}</div>
        {choices.map((choice, index) => (
          <button
            // eslint-disable-next-line react/no-array-index-key
            key={index}
            className="dropdown-choice"
            onClick={getShelfType}
            type="button"
            value={choice}
          >
            {choice}
          </button>
        ))}
      </div>
    </div>
  );
};

ButtonDropDown.propTypes = {
  choices: PropTypes.arrayOf(PropTypes.string).isRequired,
  label: PropTypes.string,
  getShelfType: PropTypes.func.isRequired,
};

ButtonDropDown.defaultProps = {
  label: 'Move to...',
};

export default ButtonDropDown;

import React，{useState}来自“React”；
从“道具类型”导入道具类型；
从'react icons/bs'导入{BsFillCaretDownFill}；
const ButtonDropDown=（{choices，label，getShelfType}）=>{
const[active，setActive]=useState（false）；
常量切换类=（）=>{
setActive（！active）；
};
返回(
{label}
{choices.map（（选项，索引）=>(
{choice}
))}
);
};
ButtonDropDown.propTypes={
选项：PropTypes.arrayOf（PropTypes.string）.isRequired，
标签：PropTypes.string，
getShelfType:PropTypes.func.isRequired，
};
ButtonDropDown.defaultProps={
标签：“移动到…”，
};
导出默认按钮下拉列表；

您关注的是

onClick

事件的签名，但实际上您可以使用所需的任何格式传递回调，然后以友好方式构建

onClick

例如，在

Book

中，您可以有一个接收Book和shelf的回调：

const Book = ({ book, doSomethingWithBookAndShelf }) => {

  return (
    <div className="book">
      <img
        src={book.imageLinks.thumbnail}
        alt={book.title}
        className="book-thumbnail"
      />
      <ButtonDropDown
        choices={['Currently Reading', 'Want to Read', 'Read', 'None']}
        onSelectChoice={(choice) => {
           // book came from the component props
           doSomethingWithBookAndShelf(book, choice);
        }}
      />
      <div className="book-title">{book.title}</div>
      <div className="book-authors">{book.authors}</div>
    </div>
  );
};

希望这能帮你找到方向。 另外，要注意，像那样工作更容易反应。避免使用事件对象获取值（即

e.target.value

）

const ButtonDropDown = ({ choices, label, onSelectChoice }) => {
  const [active, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!active);
  };

  return (
    <div className="dropdown">
      <button
        type="button"
        className="dropbtn"
        onFocus={toggleClass}
        onBlur={toggleClass}
      >
        <BsFillCaretDownFill />
      </button>
      <div
        id="myDropdown"
        className={`dropdown-content ${active ? `show` : `hide`}`}
      >
        <div className="dropdown-label">{label}</div>
        {choices.map((choice, index) => (
          <button
            // eslint-disable-next-line react/no-array-index-key
            key={index}
            className="dropdown-choice"
            onClick={() => { // we create an specific callback for each item
              onSelectChoice(choice);
            }}
            type="button"
            value={choice}
          >
            {choice}
          </button>
        ))}
      </div>
    </div>
  );
};