react隐藏按钮的实现方法:1、利用状态机设置“display_name”;2、将控件按钮放在div中进行呈现;3、通过修改状态机“display_name”的取值,来控制按钮的呈现与隐藏即可。
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react怎么隐藏按钮?
React中通过diaplay实现控件按钮的呈现与隐藏
效果图如下
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> {/* 通过状态机display_name获取diaplay取值 */} <row> <col> <col> <div> <span><button>详情</button> </span> <span><button>添加</button></span> <span><button>修改</button></span> <span><button>删除</button></span> <span><button>查看关联</button></span> </div> </row> </div> {/* 通过icon实现编辑图标 */} <div> <row> <col> <col> {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */} <icon></icon> </row> </div> {/* 页面内容 */} <layout> <content> {this.props.children} </content> </layout> </layout> ); } } export default Index;
推荐学习:《react视频教程》