Home  >  Article  >  Web Front-end  >  How to hide buttons in react

How to hide buttons in react

藏色散人
藏色散人Original
2023-01-05 10:58:342430browse

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.

How to hide buttons in react

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

1. Achieve the effect

  • Through single Click the edit icon to display and hide the corresponding button on the page.
  • The effect is as follows

How to hide buttons in react

How to hide buttons in react

##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;

    The display attribute can control the presentation and hiding of content, none means hiding, block means presenting
  • Step 1: Use the state machine to set display_name
  • Step 2: Place the control button in a div for presentation. Whether the div content is presented or not is implemented through display. The specific value of display is the display_name in the state machine
  • Step 3: Add a click event to the edit icon: modify the value of the state machine display_name. Once the state machine changes, the page will be loaded immediately, that is, the presentation and hiding of the control button
Recommended learning: "

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn