本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react怎么实现点击隐藏显示?react中元素的显示和隐藏方式的使用 在react中,我们有常用的有四种方式来显示元素的显示和隐藏,和Vue不同,vue
本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。
react怎么实现点击隐藏显示?
react中元素的显示和隐藏方式的使用
在react中,我们有常用的有四种方式来显示元素的显示和隐藏,和Vue不同,vue中我们使用v-if或v-show来显示元素的隐藏和显示
下面分别介绍一下在react中隐藏和显示元素的方法
<script type="text/babel">
class App extends React.Component {
state={
isshow:false,
}
check=()=>{
this.setState({
isShow:!this.state.isShow
})
}
render() {
return (
<div>
{}
<button style={{display:this.state.isShow?'block':'none'}}>张云龙</button>
<button style={{display:this.state.isShow?'none':'block'}}>秦霄贤</button>
<button onClick={this.check}>点击切换</button>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
block表示显示,none表示隐藏
<script type="text/babel">
class App extends React.Component {
state={
isShow:false,
}
check=()=>{
this.setState({
isShow:!this.state.isShow
})
}
render() {
return (
<div>
{}
{
this.state.isShow?(<div>秦霄贤</div>):(<div>张云龙</div>)
}
<button onClick={this.check}>点击切换</button>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
<script type="text/babel">
class App extends React.Component {
state={
isShow:false,
}
check=()=>{
this.setState({
isShow:!this.state.isShow
})
}
render() {
return (
<div>
{}
{
this.state.isShow && <div>秦霄贤</div>
}
{
!this.state.isShow && <div>张云龙</div>
}
<button onClick={this.check}>点击切换</button>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
<script type="text/babel">
class App extends React.Component {
state={
isShow:false,
love:'秦霄贤'
}
check=()=>{
this.setState({
isShow:!this.state.isShow
})
}
loves=(key)=>{
switch(key){
case '秦霄贤':
return <div>秦霄贤</div>
case '张云龙':
return <div>张云龙</div>
}
}
render() {
let ok=this.loves(this.state.love)
return (
<div>
{}
{ok}
<button onClick={this.check}>点击切换</button>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
以上就是react怎么实现点击隐藏显示的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: react怎么实现点击隐藏显示
本文链接: https://www.lsjlt.com/news/206744.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0