2016-04-30 86 views
0

我正在使用编写React的JSX style,我试图访问此onClickOutside包装的功能以找出用户何时单击。下面是其自述用法:围绕JSX中的React组件包装高级组件(HOC)

// How to install: npm install react-onclickoutside --save 
// load the High Order Component: 
var onClickOutside = require('react-onclickoutside'); 

// create a new component, wrapped by this onclickoutside HOC: 
var MyComponent = onClickOutside(React.createClass({ 
    ..., 
    handleClickOutside: function(evt) { 
    // ...handling code goes here... 
    }, 
    ... 
})); 

我试图访问在此情况下(JSX)“点击之外”的功能,但它没有工作。

import React from 'react'; 
import OnClickOutside from 'react-onclickoutside'; 

export default class Menu extends React.Component { 

    constructor(props){ 
     super(props); 
    } 


    render() { 

     return (
      <OnClickOutside> 
       <ul> 
        <li>Test 1</li> 
        <li>Test 2</li> 
        <li>Test 3</li> 
       </ul> 
      </OnClickOutside> 
     ); 
    } 


    handleClickOutside(event) { 
     console.log('Clicked outside.'); 
    } 
} 
+0

您使用ReactDOM呈现您的应用程序吗? – QoP

+0

是的,像这样: http://i.imgur.com/LQ070Ss.png –

回答

2

我想你混淆了这种情况下Higher-Order Component(HOC)和容器组件。 HOC需要一个组件(在你的情况下为Menu),然后返回一个Component(由HOC功能组成)。容器组件呈现其子项。

如示例所示,onOutsideClick组件是HOC。这应该适用于您的示例:

import React from 'react'; 
import OnClickOutside from 'react-onclickoutside'; 

export class Menu extends React.Component { 

    constructor(props){ 
     super(props); 
    } 


    render() { 

     return (  
       <ul> 
        <li>Test 1</li> 
        <li>Test 2</li> 
        <li>Test 3</li> 
       </ul> 
     ); 
    } 


    handleClickOutside(event) { 
     console.log('Clicked outside.'); 
    } 
} 

export default OnOutsideClick(Menu); 
+1

它的工作原理!我仍然在学习如何做这个JSX的事情。谢谢! –

+1

没有probs :) HOC非常有用,玩得开心! –