Comment masquer les boutons en réaction

Comment implémenter les boutons cachés dans React : 1. Utilisez la machine d'état pour définir "display_name" ; 2. Placez le bouton de contrôle dans un div pour la présentation 3. Contrôlez la présentation et la présentation du bouton en modifiant la valeur du ; machine d'état "display_name" Cachez-la simplement.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment masquer les boutons en réaction ?

React utilise diaplay pour réaliser la présentation et le masquage des boutons de contrôle

1 Pour obtenir l'effet

• Réalisez et masquez les boutons correspondants sur la page en cliquant sur l'icône d'édition,

• Le diagramme d'effet. est la suivante

2. Implémentation du code

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;

• L'attribut d'affichage peut contrôler la présentation et le masquage du contenu, aucun signifie cacher, bloquer signifie présenter
• La première étape : utiliser la machine d'état pour définir display_name
• Deuxième étape : le bouton de contrôle est placé dans le div pour la présentation. Le fait que le contenu du div soit présenté ou non est implémenté via display. La valeur spécifique de display est le display_name dans la machine d'état. : Ajoutez un événement de clic à l'icône d'édition : modifiez le display_name de la machine à états Une fois que la machine à états change la valeur, la page sera chargée immédiatement, c'est-à-dire la présentation et le masquage des boutons de contrôle
• Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!