我使用州在图标的点击事件中打开和关闭图层。当我从点击处理程序调用{{1}}时没有任何反应。
之前我直接从图标点击_onOpenLayer()
调用了方法,这确实打开了图层,但是由于不允许在rednder()中调用方法而冻结了UI。
所以我在调用open之前找到了adding a lambda的解决方案,如下所示。但是点击该图标并不会通过此更改打开图层:
onClick={this._onOpenLayer()}
为了进一步调试这个,我在onClick={() => this._onOpenLayer()}
方法中放了一个console.log,我可以看到它没有点击图标点击。
问题:
如何从render方法中的click事件调用方法?
这是I类渲染的要点。 _onOpenLayer()将openLayer状态设置为true,进而打开图层元素:
_onOpenLayer()
答案 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>
);
}
};