Блог

Я использую 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

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

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

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

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

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