如何在渲染中从单击事件调用方法？

Question

我正在使用状态在图标的单击事件中打开和关闭一个层。当我从单击处理程序调用\u onOpenLayer（）时，什么都没有发生。

以前，我直接从图标单击onClark={this._onOpenLayer（）}调用该方法，这确实打开了层，但如果由于不允许调用rednder（）中的方法而冻结了用户界面。

所以我找到了一个解决方案，在调用打开之前添加一个lambda，如下所示。但是点击图标不会打开这个更改的图层：

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

为了进一步调试，我放置了一个控制台。登录\u onOpenLayer（）方法，我可以看到它没有被点击图标。

问题:

如何从render方法中的单击事件调用方法？

这是我渲染的类的要点。_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>
    );
  }
};

Answer 1

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

Answer 2

我假设您不想在render（）中调用\u onOpenLayer（）方法，而是在每次单击图标时调用。

所以不要在渲染中调用该方法：

onClick={this.\u onOpenLayer（）}

您只需将函数传递给onClickprop即可

onClick={this.\u onOpenLayer.bind（this）}

Answer 3

确保图标是可点击的（检查css中的指针事件），并确保触发onClark。

否则试试这个......

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