本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react怎么隐藏按钮?
React中通过diaplay实现控件按钮的呈现与隐藏
1、实现效果
- 通过单击编辑图标实现页面中对应按钮的呈现与隐藏、
效果图如下
2、代码实现
import React, { Component } from 'react';
import '../../../style_css/antd.css';
import { Layout,Icon,Row, Col} from 'antd';
class Index extends Component {
// 状态机
constructor(props, context) {
super(props, context);
this.state = {
display_name: 'none', //此状态机为display的取值
}
}
display_name() { //编辑按钮的单击事件,修改状态机display_name的取值
if (this.state.display_name == 'none') {
this.setState({
display_name: 'block',
})
}
else if (this.state.display_name == 'block') {
this.setState({
display_name: 'none',
})
}
}
render() {
return (
<Layout>
{}
<div style={{ background: '#fff', paddingTop: '20px', display: this.state.display_name }}> {}
<Row>
<Col span={12}>
</Col>
<Col span={12}>
<div style={{ float: 'right' }}>
<span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">详情</Button> </span>
<span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">添加</Button></span>
<span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">修改</Button></span>
<span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large" >删除</Button></span>
<span style={{ paddingLeft: '5px', paddingRight: '10px' }}><Button style={buttoncolor} size="large">查看关联</Button></span>
</div>
</Col>
</Row>
</div>
{}
<div style={{ background: '#fff', paddingTop: '10px' }}>
<Row>
<Col span={23}>
</Col>
<Col span={1} onClick={this.display_name.bind(this)}> {}
<Icon type='edit' style={{ fontSize: '30px' }} />
</Col>
</Row>
</div>
{}
<Layout style={{ padding: '10px 0', background: '#fff' }}>
<Content style={{ padding: '0 24px', minHeight: 280 }}>
{this.props.children}
</Content>
</Layout>
</Layout>
);
}
}
export default Index;
- display属性可以控制内容的呈现与隐藏,none表示隐藏,block表示呈现
- 第一步:利用状态机设置display_name
- 第二步:控件按钮放在div中进行呈现,div内容的呈现与否通过display实现,display具体取值取状态机中的display_name
- 第三步:给编辑图标添加单击事件:修改状态机display_name的取值,状态机一旦改变页面便会立即加载,即控制按钮的呈现与隐藏
以上就是react怎么隐藏按钮的详细内容,更多请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1142
183.71 KB下载数642
644.84 KB下载数2755
相关文章
发现更多好内容猜你喜欢
AI推送时光机react怎么隐藏按钮
前端开发2023-05-14
react如何隐藏按钮
前端开发2023-07-04
怎么在css中隐藏按钮
前端开发2023-06-15
jquery 一个按钮隐藏
前端开发2023-05-19
video标签怎么隐藏下载按钮
前端开发2024-04-02
怎么使用jquery隐藏button按钮元素
前端开发2023-07-05
javascript怎么实现点击按钮显示/隐藏
前端开发2023-07-06
javascript如何实现按钮隐藏div
前端开发2024-04-02
如何实现javascript点击按钮隐藏div
前端开发2024-04-02
如何使用CSS技巧来隐藏按钮
前端开发2023-05-14
jquery怎么实现点击按钮显示与隐藏效果
前端开发2023-06-30
react native怎么隐藏组件
前端开发2023-05-14
Angular中怎么通过点击按钮控制隐藏和显示
前端开发2024-04-02
php页面怎么用JavaScript实现点击按钮显示隐藏
前端开发2023-07-05
微信小程序如何隐藏客服按钮
前端开发2023-06-26
如何隐藏Ubuntu18.04 左上方的活动按钮
前端开发2023-06-05
微信小程序如何实现按钮button边框隐藏和点击隐藏
前端开发2024-04-02
Vue怎么实现点击按钮显示或隐藏内容效果
前端开发2023-07-04
jquery实现点击按钮显示与隐藏效果
前端开发2024-04-02
vue表单中怎么遍历表单操作按钮的显示隐藏
前端开发2024-04-02
咦!没有更多了?去看看其它编程学习网 内容吧