如何从渲染内的点击事件调用方法？

我正在使用状态在图标的单击事件中打开和关闭图层。当我从点击处理程序调用_onOpenLayer()时，没有任何反应。如何从渲染内的点击事件调用方法？

以前我从图标点击onClick={this._onOpenLayer()}直接调用方法，这确实打开了图层，但是如果由于未被允许在rednder（）内调用方法而冻结了UI。

所以我找到了一个解决方案adding a lambda之前打电话打开如下建议。但是点击图标没有这种改变打开图层：

onClick={() => this._onOpenLayer()}

为了进一步调试这一点，我把的console.log在_onOpenLayer()方法，我可以看到它不会击中点击图标。

问题：

如何从渲染方法中的点击事件调用方法？

这是我渲染的类的要点。该_onOpenLayer（）设置openLayer状态设置为true这反过来又打开层元素：

class Page1 extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     openLayer: false, 
    };  
    } 


    _onOpenLayer() { 

     console.log("fooo"); 
     this.setState({ 
      openLayer: true 
     }); 
    } 


    _onCloseLayer() { 
    this.setState({ 
     openLayer: false 
     }); 

    } 


    render() { 
    let layerNode; 
    if (this.state.openLayer) { 
     layerNode = (
     <Layer flush={true} closer={true} onClose={() => this._onCloseLayer()} align='right'> 
     </Layer> 
    ); 
    }  


    return (
     <Section pad="small" full="vertical" flex={true}> 
      <div> 
       <Box direction="row" align="center" justify="end" tag="aside" pad={{horizontal: "large" , between: "small"}} > 
        <Filter size="medium" colorIndex="brand" onClick={() => this._onOpenLayer()} /> 
       </Box> 
       {layerNode} 

     </Section> 
    ); 
    } 
};

来源

2016-09-29 Brian J

确保图标点击（检查CSS的pointer-events），并确保onClick被触发。

否则试试这个....

class Page1 extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     openLayer: false, 
    }; 
    this._onOpenLayer = this._onOpenLayer.bind(this) 
    this._onCloseLayer = this._onCloseLayer.bind(this) 
    } 


    _onOpenLayer() { 

     console.log("fooo"); 
     this.setState({ 
      openLayer: true 
     }); 
    } 


    _onCloseLayer() { 
    this.setState({ 
     openLayer: false 
     }); 

    } 


    render() { 
    let layerNode; 
    if (this.state.openLayer) { 
     layerNode = (
     <Layer flush={true} closer={true} onClose={this._onCloseLayer} align='right'> 
     </Layer> 
    ); 
    }  


    return (
     <Section pad="small" full="vertical" flex={true}> 
      <div> 
       <Box direction="row" align="center" justify="end" tag="aside" pad={{horizontal: "large" , between: "small"}} > 
        <Filter size="medium" colorIndex="brand" onClick={this._onOpenLayer} /> 
       </Box> 
       {layerNode} 

     </Section> 
    ); 
    } 
};

来源

2016-09-29 12:31:01

的拉姆达使用ES2015/ES6，你需要使用填充工具或巴贝尔......

class Page1 extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     openLayer: false, 
    };  
    } 

    _onOpenLayer() { 

     console.log("fooo"); 
     this.setState({ 
      openLayer: true 
     }); 
    } 


    _onCloseLayer() { 
    this.setState({ 
     openLayer: false 
     }); 

    } 


    render() { 
    let layerNode; 
    if (this.state.openLayer) { 
     layerNode = (
     <Layer flush={true} closer={true} onClose={this._onCloseLayer} align='right'> 
     </Layer> 
    ); 
    }  


    return (
     <Section pad="small" full="vertical" flex={true}> 
      <div> 
       <Box direction="row" align="center" justify="end" tag="aside" pad={{horizontal: "large" , between: "small"}} > 
        <Filter size="medium" colorIndex="brand" onClick={this._onOpenLayer} /> 
       </Box> 
       {layerNode} 

     </Section> 
    ); 
    } 
};

来源

2016-09-29 12:35:49

我假设你想致电_onOpenLayer()方法不在render（）中，而是在每个图标点击。的

因此，而不是调用该方法在渲染：

onClick={this._onOpenLayer()}

你可以通过你的函数onClick道具

onClick={this._onOpenLayer.bind(this)}

来源

2016-09-29 12:38:42

如何从渲染内的点击事件调用方法？

回答

相关问题