0

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

以前我直接从图标 click 调用该方法onClick={this._onOpenLayer()}，这确实打开了图层，但如果由于不允许在 rednder() 中调用方法而冻结了 UI。

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

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

为了进一步调试，我在_onOpenLayer()方法中放置了一个 console.log ，我可以看到它没有在图标点击时被击中。

问题：

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

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

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>
    );
  }
};
于 2016-09-29T12:35:49.103 回答