如何從渲染內的點擊事件調用方法？

我正在使用狀態在圖標的單擊事件中打開和關閉圖層。當我從點擊處理程序調用_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

如何從渲染內的點擊事件調用方法？

回答

相關問題