将事件处理程序作为参数传递给React中的组件

Question

我有一个关于向组件传递单击事件的问题。我收到一个错误，说我作为参数传递的函数不是计算时的函数。这是我的代码。

//Page.js

import { HeaderFrame, BodyFrame, FooterFrame } from './frames/index'

headerClicked = (event) => {
  let extractedText = this.extractContent(event.target.innerHTML);
  console.log(extractedText)
}

render() {
  return (
    <div className="Page">
      <label>
        <HeaderFrame headerClicked={(event) => this.headerClicked()}/>
      </label>
    </div>
  );
}

//HeaderFrame.js

import React from 'react';
import Frame, { FrameContextConsumer } from 'react-frame-component';

const HeaderFrame = (headerClicked) => (
<Frame class='headerBox' head={
   <link type='text/css' href='../css/HeaderBox.css' />
  }>
 <FrameContextConsumer>
  {
    ({document, window}) => {
      debugger; //Uncaught TypeError: headerClicked is not a function
      document.addEventListener("click", headerClicked, false);
      document.designMode = 'On';
      // Render Children
    }
  }
 </FrameContextConsumer>
</Frame>
);

export default HeaderFrame

导入/导出工作正常，实际上在我的调试器所在的时刻，控制台不知道如何处理headerClicked函数……

Answer 1

HeaderFrame的headerClicked是一个道具，它没有要传递的事件，所以你做的方式是不正确的。您需要像下面这样传递headerClicked，您可以在函数中访问该事件。

你只需要下面的改变就可以让它工作

变化

<HeaderFrame headerClicked={(event) => this.headerClicked()}/>

至

<HeaderFrame headerClicked={this.headerClicked}/>