Обработка события щелчка в компоненте без сохранения состояния и внутри функции карты

Я использую ReactJs, и у меня есть два компонента без состояния:

Родительский компонент получает список проектов

{currentProjectData.map((project) => (
    <ProjectItem
      key={project.projectid}
      id={project.projectid}
      project={project}
    />
  ))}

а дочерний компонент получает ключ

 return (
    <Card key={id} elevation={5} className={classes.root}>
      <Box
        borderLeft={componentItem.borderLeftValue}
        borderColor={componentItem.borderColorValue}
        onMouseOver={handleChangeOnMouseEnter}
        onMouseLeave={handleChangeOnMouseLeave}
      ></Card>)

У меня возникают проблемы с обработкой события щелчка, когда кто-то нажимает на карточку, мне нужен ключ

 const handleClick = (key) => {
   console.log(key);
  };

Я помещаю событие клика в карточку

<Card
  key={id}
  elevation={5}
  className={classes.root}
  onClick={handleClick(id)}
>

но триггер события щелчка, когда я перемещаю курсор внутри карты

введите описание изображения здесь

Где мне обрабатывать событие щелчка (родительский компонент или дочерний компонент) и как?


reactjs javascript react-functional-component
person EduardoUstarez    schedule 26.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Он должен быть на Card, то, что вы передаете в handleClick, зависит от того, как вы используете реквизиты в дочернем компоненте, вы можете передать ключ или идентификатор. Синтаксис также может быть props.key или props.id, если вы не деструктурируете props.

return (
    <Card key={id} elevation={5} className={classes.root} onClick={()=>handleClick(id)}>
      <Box
        borderLeft={componentItem.borderLeftValue}
        borderColor={componentItem.borderColorValue}
        onMouseOver={handleChangeOnMouseEnter}
        onMouseLeave={handleChangeOnMouseLeave}
      ></Card>)
person Community    schedule 26.08.2020
comment
Я пробовал, но триггер события щелчка, когда я перемещаю курсор внутри карты, не происходит, когда я нажимаю на карту, я не знаю, почему - person EduardoUstarez; 27.08.2020
comment
Попробуйте передать функцию обратного вызова {() = ›handle Click (id)} - person SM1105922; 27.08.2020
comment
HandleClick должен быть в дочернем, если вы не передаете его как опору от родителя - person SM1105922; 27.08.2020
comment
Да, это работает!! передача функции обратного вызова {() = ›handle Click (id)} @ SM1105922 - person EduardoUstarez; 27.08.2020