Передача обработчика событий в качестве параметра компоненту в React - PullRequest
Новая
       29

Передача обработчика событий в качестве параметра компоненту в React

0 голосов
/ 12 января 2019

У меня есть вопрос о передаче события щелчка компоненту. Я получаю сообщение об ошибке, в котором говорится, что функция, которую я передаю в качестве параметра, не является функцией при вычислении. Вот мой код. 

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

1 Ответ

0 голосов
/ 12 января 2019

headerClicked to HeaderFrame - это реквизит, и у него нет события для прохождения, так что вы не правы. Вам нужно передать headerClicked, как показано ниже, и вы можете получить доступ к событию в функции.

Вам нужно только изменить ниже, чтобы оно заработало

Изменение 

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

К 

<HeaderFrame headerClicked={this.headerClicked}/>
...