Почему не срабатывает событие onClick?

Question

[uzi_no_uzi]

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

В 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;

Comments

[Петр Мухуров]

Не нужно писать constructor() {}, если там ничего нет

constructor(props) {
  super(props); // (props) <= важно, иначе будет поломано
}

если у вас в WorkItem onClick не используется из пропсов, у вас onClick и не будет работать, onClick вешается на DOM-элемент, а WorkItem - это компонент

Answer 1

[hzzzzl]

в самом WorkItem есть обработчик onClick по элементу хтмл?
онКлик можно повесить только на хтмл элемент, на div например какой-нибудь, или что там за item

<WorkItem onClick={() => {alert(1)}} />

class WorkItem extends React.Component {
  render() {
    return <div onClick = {this.props.onClick}>i am clickable work item</div>
  }
}

Answer 2

[Роман Александрович]

а вот так?

<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}  />