网络反应组件不发出事件

Question

我正在使用web-react-components，我有一个react组件，我想将其转换为如下所示的web组件：

export default function SimpleComp(props) {
  let name = props.name;
  const onButtonClick = props.onButtonClick;
  return (
    <div>
      hello all! {name}
      <button onClick={onButtonClick}>Click this</button>
    </div>
  );
}

register(SimpleComp, 'simple-component', [
  'name'
  ],
  {
    onButtonClick: e => {
      console.log(e)
      e.stopPropagation();
      return new Event('clickbutton', { bubbles: true })
    }
  }
)

然后在App.js中，我像这样调用组件

function App() {
  const childEvent = () => {
    console.log('got an event from the parent')
  }
  return (
    <div className="App">
      <header className="App-header">
        <simple-component name='webcomponent' onButtonClick={childEvent}> </simple-component>
      </header>
    </div>
  );
}

childEvent不触发。 WebComponent的所有其他功能都可以正常工作。是孩子发出的事件才是导致问题的原因。