0

Имеется такой компонент (все лишнее из него убрал)

В WorkItem элементах прописывается onClick={() => {alert(1)}}, но по какой-то причине событие не срабатывает, из-за чего это может быть?

P.S. Проверил чтобы поверх элемента не было других элементов, т.е. клику по элементу ничего не мешает.

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import WorkItem from '../WorkItem';

class PortfolioSectionPanel extends React.Component {

    constructor() {
        super();

        

    }
    
    render() {


        //Расположение кругов
        let workItems;

        if(this.state.showWorks) {
            let {works} = this.state;

            const angleRad = 360 / works.length * 0.017; //Частота кругов в радианах
            const bg = document.getElementById('portfolio-panel-disk');
            let radius;
            if(bg) {
                radius = parseInt(getComputedStyle(bg).width) / 2;
            }

            workItems = works.map((currentValue, index) => {
                return <WorkItem
                        onClick={() => {alert(1)}} 
                        type={currentValue.type} 
                        link={currentValue.link} 
                        key={index + 50} 
                        leftOffset={radius - radius * Math.cos(angleRad * index)}
                        topOffset={radius - radius * Math.sin(angleRad * index)}
                        angle={-this.state.wheelAngleinDeg}  />
            })
        } else {
            workItems = null;
        }

        let diskStyle = {
            transform: `translate(-50%,-50%) rotate(${this.state.wheelAngleinDeg}deg)`,
        };

                                    
         

        return(

            <div className='portfolio-panel' id='porfolioPanel' ref={this.props.link}>
                <div className='portfolio-panel-background' 
                     ref={this.props.linkCircle} 
                     onTransitionEnd={(e) => {this.showWorks(e)}}
                 >
                    <ReactCSSTransitionGroup onTransitionEnd={(e) => {e.stopPropagation()}}
                        transitionName='portfolio-panel__information'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {middleElementCircle}
                    </ReactCSSTransitionGroup>
                    <div style={diskStyle} className='portfolio-panel-disk' id='portfolio-panel-disk'>
                        <ReactCSSTransitionGroup onTransitionEnd={(e) => {e.stopPropagation()}}
                        transitionName='work-item'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {workItems}
                        </ReactCSSTransitionGroup>
                    </div>
                </div>
            </div>
        )
    }
}
    

export default PortfolioSectionPanel;

5
  • Потому что вы вставляете WorkItem. Повесьте onclick непосредственно в нём. Так получается вы передаётся функцию через props 13 авг 2019 в 10:18
  • @ВладиславЖидко, как это сделать? У меня 5 элементов workItem, и у каждого должен быть свой onClick с функцией в которую будет передаваться определенный аргумент, для каждого элемента этот аргумент свой
    – uzi_no_uzi
    13 авг 2019 в 10:19
  • Значит на каждый workItem вешаете onClick внутри него. Опр. аргумент передаёте через пропсы и передаётся его в onClick -- onClick={() => alert(props.something). 13 авг 2019 в 10:24
  • @ВладиславЖидко, не могу понять куда это прописывать вообще :) Как понять внутри его? Можете дать пример?)
    – uzi_no_uzi
    13 авг 2019 в 10:26
  • 3
    Вы импортируете workItem. Перейди в этот компонент. И на самом верхнем элемент(div, section, не знаю, что там у вас) повесьте её 13 авг 2019 в 10:27

1 ответ 1

1

onClick нельзя повесить на сам компонет т.к. компонет это абстракия в DOM его нет. Поэтому сделайте так - в НОС компоненте обявляете функцию с исполняемым кодом, передаёте эту функцию в простой компонет и уже в нём на нужном элементе вызываете onClick с этой функцией.

Код писал на коленке, но должно всё работать ...

import React, { Component  } from 'react';

export default class PortfolioSectionPanel extends Component {
    hendelClick = () => {
        alert(1)
    }
    render() {
        // ....
        workItems = works.map((v, i) => {
            return <WorkItem
                    hendelClick={this.hendelClick}
                    // ...
                    />
        })
        // ....
        return (
            <>
                {/*Ваш код*/}
            </>
        )
    }
}

const WorkItem = ({
    hendelClick
}) => {
    return (
        <div>
            <div onClick={hendelClick}></div>
        </div>
    )
}
export default WorkItem 

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.