[英]Why cant I highlight the text on my screen in my react component?
I am having a very weird issue with selecting the text on my screen in my react component.在我的反应组件中选择屏幕上的文本时,我遇到了一个非常奇怪的问题。 I want the text to be centered on the screen, so i do the following:
我希望文本在屏幕上居中,所以我执行以下操作:
render(props){
return(
<div>
<div>
<div style = {{display: "flex", justifyContent: "center", overflow : "hidden"}}>
<Banner lobby_num = {this.props.Lobbycode}/>
</div>
<div className = "split left">
<div style = {{overflow: "auto"}}>
<Lobbylist players={this.props.playerlist} images={this.props.pfps}/>
</div>
<MenuButton
style={{fontSize: "30px"}}
text="Leave"
onClick={this.leaveLobby}
/>
</div>
</div>
<div className = "split right">
<h1>Pick a Profile Picture</h1>
<div className = "centered">
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp1,pfp13,"pfp1"],[pfp2,pfp13,"pfp2"],[pfp3,pfp13,"pfp3"]]}/>
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp4,pfp13,"pfp4"],[pfp5,pfp13,"pfp5"],[pfp6,pfp13,"pfp6"]]}/>
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp7,pfp13,"pfp7"],[pfp8,pfp13,"pfp8"],[pfp9,pfp13,"pfp9"]]}/>
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp10,pfp13,"pfp10"],[pfp11,pfp13,"pfp11"],[pfp12,pfp13,"pfp12"]]}/>
</div>
</div>
</div>
)
}
Here the element to bring your attention to is这里要引起您注意的元素是
<div style = {{display: "flex", justifyContent: "center", overflow : "hidden"}}>
<Banner lobby_num = {this.props.Lobbycode}/>
</div>
Which is my centered text at the top of the screen, however this yields the following result: [,[enter image description here][1]][1] When I left click and drag.这是我在屏幕顶部居中的文本,但是这会产生以下结果:[,[在此处输入图像描述][1]][1] 当我左键单击并拖动时。 for some reason it wont select, However: a change as simple as moving it into the div below it:
由于某种原因,它不会 select,但是:一个简单的改变,就像将它移动到它下面的 div 中一样:
render(props){
return(
<div>
<div>
<div className = "split left">
<div style = {{display: "flex", justifyContent: "center", overflow : "hidden"}}>
<Banner lobby_num = {this.props.Lobbycode}/>
</div>
<div style = {{overflow: "auto"}}>
<Lobbylist players={this.props.playerlist} images={this.props.pfps}/>
</div>
<MenuButton
style={{fontSize: "30px"}}
text="Leave"
onClick={this.leaveLobby}
/>
</div>
</div>
<div className = "split right">
<h1>Pick a Profile Picture</h1>
<div className = "centered">
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp1,pfp13,"pfp1"],[pfp2,pfp13,"pfp2"],[pfp3,pfp13,"pfp3"]]}/>
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp4,pfp13,"pfp4"],[pfp5,pfp13,"pfp5"],[pfp6,pfp13,"pfp6"]]}/>
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp7,pfp13,"pfp7"],[pfp8,pfp13,"pfp8"],[pfp9,pfp13,"pfp9"]]}/>
<ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp10,pfp13,"pfp10"],[pfp11,pfp13,"pfp11"],[pfp12,pfp13,"pfp12"]]}/>
</div>
</div>
</div>
)
}
Makes it selectable again, but it is no longer centered: [,[enter image description here][2]][2] What is going on, does anyone have any idea how i could get both a centered text and a selectable text, I don't know what i'm doing wrong!使其再次可选择,但不再居中:[,[在此处输入图像描述][2]][2] 发生了什么,有谁知道我如何获得居中文本和可选文本,我不知道我做错了什么!
ps, this is my banner code: ps,这是我的横幅代码:
class Banner extends React.Component {
render(props) {
return <h1 >Game {this.props.lobby_num}</h1>
}
}
export default Banner;
I tried to directly place the h1 in the original code, but the result remained [1]: https://i.stack.imgur.com/DKozH.jpg [2]: https://i.stack.imgur.com/lc3VK.jpg我尝试将h1直接放在原代码中,结果依旧[1]: https://i.stack.imgur.com/DKozH.jpg [2]: https://i.stack.imgur.com /lc3VK.jpg
try adding an id to the Banner, such as id="banner"
and try adding this to css尝试向横幅添加 id,例如
id="banner"
并尝试将其添加到 css
#banner {
pointer-events: all;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.