我有這樣的代碼：
import React from "react";
import Overlay from "./Overlay";
export default class TagListItem extends React.Component {
render() {
return(
<div className={'tag'} onClick={() => <Overlay data={this.props}/>}>
{this.props.tag}
</div>
)
}
}
使用斷點我已經能夠確定 onClick 事件觸發，但我的 Overlay 類沒有被觸發（當點擊“標簽”時，Overlay 中實際上沒有發生任何事情）。這是我的疊加代碼，我哪里錯了？是否無法通過 onClick 呼叫類？
import React from "react";
import ImagesAndTags from "./ImagesAndTags";
export default class Overlay extends React.Component {
constructor(props) {
super(props);
this.state = {
manifest: [],
}
}
render() {
const imagesAndTags = new ImagesAndTags();
imagesAndTags.getManifest(this.props.imageName, this.props.tag)
.then(manifest => {
this.setState({manifest: manifest})
})
return(
<div className={'overlay'}>
{this.state.manifest}
</div>
)
}
}
uj5u.com熱心網友回復：
不，你不能那樣做
export default class TagListItem extends React.Component {
render() {
return(
<div className={'tag'} onClick={() => <Overlay data={this.props}/>}>
{this.props.tag}
</div>
)
}
}
相反，您可以設定一個狀態來控制是否要打開疊加層
export default class TagListItem extends React.Component {
this.state ={
overlay = false
}
render() {
return(
<div className={'tag'} onClick={() => this.setState(state=>{overlay : !state.overlay})}>
{this.state.overlay && <Overlay data={this.props}/>}
{this.props.tag}
</div>
)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318255.html
下一篇：反應具有多個值的映射物件