如何从render中的click事件调用方法?

时间:2016-09-29 12:20:58

标签: reactjs state react-jsx grommet

我使用州在图标的点击事件中打开和关闭图层。当我从点击处理程序调用{​​{1}}时没有任何反应。

之前我直接从图标点击_onOpenLayer()调用了方法,这确实打开了图层,但是由于不允许在rednder()中调用方法而冻结了UI。

所以我在调用open之前找到了adding a lambda的解决方案,如下所示。但是点击该图标并不会通过此更改打开图层:

onClick={this._onOpenLayer()}

为了进一步调试这个,我在onClick={() => this._onOpenLayer()} 方法中放了一个console.log,我可以看到它没有点击图标点击。

问题:

如何从render方法中的click事件调用方法?

这是I类渲染的要点。 _onOpenLayer()将openLayer状态设置为true,进而打开图层元素:

_onOpenLayer()

3 个答案:

答案 0 :(得分:2)

确保图标可点击(检查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>
    );
  }
};

答案 1 :(得分:1)

我认为您希望调用 _onOpenLayer()方法,而不是在render()中,而是在每次点击图标上。

所以不要在render中调用该方法:

onClick={this._onOpenLayer()}

你可以将你的功能传递给onClick prop

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

答案 2 :(得分:0)

lambda由es2015 / es6使用,你需要使用polyfill或babel ......

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