0

I'm using state to open and close a layer in a click event of an icon. When I call the _onOpenLayer() from the click handler nothing happens.

Previously I had called the method direct from the icon click onClick={this._onOpenLayer()}, this did open the layer but if froze up the UI due to not being allowed to call a method within rednder().

So I found a solution of adding a lambda before the call to open as suggested below. But clicking the icon doesn't open the layer with this change:

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

To further debug this I put a console.log in the _onOpenLayer() method and I can see it doesn't get hit on the icon click.

Question:

How can you call a method from click event within render method?

This is a gist of the class I'm rendering. The _onOpenLayer() sets the openLayer state to true which in turn opens the layer element:

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>
    );
  }
};
4

3 に答える 3

2

アイコンがクリック可能であることを確認し ( pointer-eventscss で確認)、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-29T12:31:01.637 に答える
1

render() ではなく、アイコンをクリックするたびにメソッドを呼び出し たいと思います。_onOpenLayer()

したがって、レンダリングでそのメソッドを呼び出す代わりに:

onClick={this._onOpenLayer()}

関数をonClickpropに渡すだけです

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

于 2016-09-29T12:38:42.870 に答える
0

ラムダは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-29T12:35:49.103 に答える