反应 onClick 不传播事件

Question

我创建了一个新的 reactjs 项目，不知何故 onClick={() => console.log('clicked...')} 不会传播事件，即使该组件是在 DOM 上呈现的。

但是，当我在 JSFiddle 上尝试时，相同的代码会传播一个事件。

请帮忙。

编辑

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;

我试过你的代码，它很有用。