Функция onMouseOver () не срабатывает при реагировании - PullRequest
Новая
       9

Функция onMouseOver () не срабатывает при реагировании

1 голос
/ 09 марта 2020

Итак, я пытаюсь использовать onMouseOver для моего компонента React, как этот 

<CookieDetails
  key={cookie.id}
  name={cookie.name}
  cost={cookie.cost}
  value={cookie.cost}
  numOwned={purchasedItems[cookie.id]}
  onMouseOver={event => {
    console.log('cookies');
    if (numCookies < cookie.cost) {
      alert('Not Enough Cookies');
      return;
    }
    setPurchasedItems({
      ...purchasedItems,
      [cookie.id]: purchasedItems[cookie.id] + 1,
    });
    setNumCookies(numCookies - cookie.cost);
    console.log('purchased', purchasedItems[cookie.id], numCookies);
  }}
/>;

, и вот что сейчас внутри моего компонента 

import React from 'react';
const CookieDetails = ({ name, cost, value, numOwned }) => {
  return (
    <React.Fragment>
      <div className="cookie-details-wrapper">
        <h3>{name}</h3>
        <p>Cost:{cost}</p>
        <p>Value:{value}</p>
        <p>Owned:{numOwned}</p>
      </div>
    </React.Fragment>
  );
};

export default CookieDetails;

Однако, когда я наведу курсор мыши на свой компонент , Ничего не произошло. Не записывает файлы cookie консоли событий. Любая помощь будет оценена

Ответы [ 2 ]

4 голосов
/ 09 марта 2020

CookieDetails не элемент DOM (поэтому он не имеет встроенной обработки событий), это компонент, который вы написали. Вы ничего не делаете с onMouseOver опорой.

Вам нужно прочитать эту опору и прикрепить ее к элементу DOM (например, div). 

const CookieDetails = ({ name, cost, value, numOwned, onMouseOver }) => {
  return (
    <React.Fragment>
      <div onMouseOver={onMouseOver} className="cookie-details-wrapper">
0 голосов
/ 09 марта 2020

Итак, здесь onMouseOver - опора, которую вы передаете детям. Вам нужно вызвать onMouseOver на детей 

<CookieDetails
  key={cookie.id}
  name={cookie.name}
  cost={cookie.cost}
  value={cookie.cost}
  numOwned={purchasedItems[cookie.id]}
  onMouseOver={event => {
    console.log('cookies');
    if (numCookies < cookie.cost) {
      alert('Not Enough Cookies');
      return;
    }
    setPurchasedItems({
      ...purchasedItems,
      [cookie.id]: purchasedItems[cookie.id] + 1,
    });
    setNumCookies(numCookies - cookie.cost);
    console.log('purchased', purchasedItems[cookie.id], numCookies);
  }}
/>;



import React from 'react';
const CookieDetails = ({ name, cost, value, numOwned, onMouseOver }) => {
  return (
    <React.Fragment>
      <div className="cookie-details-wrapper" onMouseOver={onMouseOver}>
        <h3>{name}</h3>
        <p>Cost:{cost}</p>
        <p>Value:{value}</p>
        <p>Owned:{numOwned}</p>
      </div>
    </React.Fragment>
  );
};

export default CookieDetails;
...