Реагирующий функциональный компонент не обрабатывает событие - PullRequest
Новая
       10

Реагирующий функциональный компонент не обрабатывает событие

0 голосов
/ 12 июня 2019

У меня есть компоненты сборника рассказов, которые я использую в своем проекте. Поэтому мне нужно использовать компонент Card в моем проекте, в который нужно добавить немного стиля. Поэтому я добавляю стиль, используя "styled" из styled-component. После того, как я экспортирую свою новую CardNew и попробую использовать ее на некоторых страницах. Это работает, но когда я пытаюсь добавить события onMouseLeave / onMouseEnter к этому компоненту, это не работает.

Когда я пытаюсь использовать начальную версию карты из сборника рассказов, без какого-либо стиля и добавления события, это работает. Вот мой код. 

const CardStyled = styled(Card)`
  width: 200px;
  height: 100px;
  margin-bottom:10px;
  color:red;
  line-height: 1.5em;
`;

export default function CardNew(props) {
  return (
    <CardStyled>
      <Card.Body>
        <p>{props.content}</p>
      </Card.Body>
    </CardStyled`enter code here`>
  )
}

А потом я использую этот компонент и пытаюсь обработать любое событие 

<CardNew onMouseEnter={() => onMouseEnter()} onMouseLeave={() => onMouseLeave()} >
</CardNew>

Может кто-нибудь объяснить, почему я не могу сделать стилизацию для компонента сборника рассказов, а затем использовать его? Спасибо.

1 Ответ

0 голосов
/ 12 июня 2019

Поскольку ваш компонент CardNew не является компонентом HTML. Итак, вы должны передать все реквизиты Дону. Как: 

export default function CardNew(props) {
    return (
        <CardStyled>
        <Card.Body>
            <p {...props}>{props.content}</p>
        </Card.Body>
        </CardStyled`enter code here`>
    )
}

Это позволит вам обработать любое событие для элемента

.

...