Question

我对将click事件传递到组件有疑问。我收到一个错误消息，说我作为参数传递的函数不是评估函数。这是我的代码。

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

headerClicked到HeaderFrame是一个道具，它没有要传递的事件，因此您的操作方式不正确。您需要像下面那样传递headerClicked，然后才能在函数中访问该事件。

您只需要进行以下更改即可使其工作

更改

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

收件人

<HeaderFrame headerClicked={this.headerClicked}/>

在React

1 个答案: