反应 onClick 不传播事件

Question

I created a new reactjs project, somehow onClick={() => console.log('clicked...')} does not propagate an event, even though the component is rendered on the DOM.

However, the same code propagates an event when I tried it on a JSFiddle.

Help please.

EDIT

import React from 'react'


const Key = props => {
    return (<button
     style={style} 
     className={'calc-key ' + props.element.name} 
    //  onClick={props.handleButtonClick}
     onClick={() => console.log('Clicked...')}
     >
        {props.element.value}
    </button>)
}

const style = {
    width: '33%',
    textAlign: 'center',
    padding: '1em',
    fontWeight: '800',
    cursor: 'pointer',
    zIndex: '100'
    
}

export default Key;

Answer 1

import React from 'react'

const Key = props => {
  return (<button
    style={style}
    className={'calc-key ' + props?.element?.name}
    onClick={() => console.log('Clicked...')}
  >
    {props?.element?.value}
  </button>)
}

const style = {
  width: '33%',
  textAlign: 'center',
  padding: '1em',
  fontWeight: '800',
  cursor: 'pointer',
  zIndex: '100'

}

export default Key;

i tried your code, its useful.