Home > Article > Web Front-end > How to hide buttons in react
How to implement hidden buttons in react: 1. Use the state machine to set "display_name"; 2. Place the control button in a div for presentation; 3. Control by modifying the value of the state machine "display_name" Just show and hide the button.
The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.
How to hide buttons in react?
React uses diaplay to realize the presentation and hiding of control buttons
The effect is as follows
##2. Code implementation
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 video tutorial"
The above is the detailed content of How to hide buttons in react. For more information, please follow other related articles on the PHP Chinese website!