2016-07-18 3 views
0

Я следую за шаблоном container/ui_component, чтобы передать действия отправки hexx моему компоненту ui_component из родительского контейнера. Я могу успешно вызвать действия отправки из метода рендеринга ui_component, например, событие onClick ниже работает нормально.Действия диспетчера отправки из окна прослушивателя событий окна

Моя проблема: я не могу запустить те же действия из eventListener (handleResize) внутри одного и того же компонента.

import React, { Component, PropTypes } from 'react'; 
import { Link } from 'react-router'; 
import classNames from 'classnames'; 


class Dashboard extends Component { 
    constructor(props) { 
    super(props); 
    this.props.updateDashVis.bind(this); // not sure if this is doing anything 
    } 

    static contextTypes = { 
    router: PropTypes.object 
    }; 


    handleResize() { 
    this.props.updateDashVis('app-dash'); // returns undefined 
    } 

    componentDidMount() { 
    window.addEventListener('resize', this.handleResize); 
    } 

    componentWillUnmount() { 
    window.removeEventListener('resize', this.handleResize); 
    } 

    componentWillUnmount() { 
    this.props.resetMe(); 
    } 



    render() { 
     return (

     // ... 
     <div className="top-bar"> 

      <div className="burger" onClick={()=> {this.props.updateDashVis(this.props.appDashVis)}} ><i className="fa fa-bars" aria-hidden="true"></i></div> 
      {/* onClick works fine and action is fired */} 

     </div> 

     // ... 


    ); 
    } 
} 

export default Dashboard 

Это мой первый проект React/Redux/ES6, так что это может быть что-то простое. Любые рекомендации приветствуются.

+0

хотел сказать, "слушатель события окна", а не вдовой. Там где-то есть шутка ... –

+0

Выяснил это. Я создал новое действие, которое не нуждается в аргументе, а затем просто привязало его к обработчику событий: componentDidMount() { window.addEventListener ('resize', this.props.hideDash); } componentWillUnmount() { window.removeEventListener ('resize', this.props.hideDash); } –

+0

Рассмотрите свой собственный вопрос и отметьте его как ответ. Таким образом, другие могут воспользоваться вашим решением! –

ответ

0

метод 'updateDashVis' передается через реквизит, который не требует привязки в конструкторе, но вы должны привязать ссылку «this» к методу handleResize в конструкторе. Так что ваш конструктор хотел бы ниже ...

constructor(props) { 
super(props); 
this.handleResize = this.handleResize.bind(this); 

}

Смежные вопросы