ホームページ >ウェブフロントエンド >フロントエンドQ&A >Reactでボタンを非表示にする方法

Reactでボタンを非表示にする方法

藏色散人
藏色散人オリジナル
2023-01-05 10:58:342449ブラウズ

React で隠しボタンを実装する方法: 1. ステート マシンを使用して "display_name" を設定します; 2. プレゼンテーション用にコントロール ボタンを div に配置します; 3. ステート マシンの値を変更して制御します。 display_name" ボタンを表示または非表示にするだけです。

Reactでボタンを非表示にする方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応でボタンを非表示にする方法は?

React はコントロール ボタンの表示と非表示を実現するために Diaplay を使用します

1. 効果を実現します

  • 編集アイコンを 1 回クリックすると、ページ上の対応するボタンが表示または非表示になります。
  • #効果は次のとおりです。

Reactでボタンを非表示にする方法

Reactでボタンを非表示にする方法

##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>    {/* 通过状态机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;

    display 属性はコンテンツの表示と非表示を制御できます。なしは非表示、ブロックを意味します。
  • ステップ 1: ステート マシンを使用して、display_name を設定します。
  • ステップ 2: プレゼンテーション用にコントロール ボタンを div に配置します。div コンテンツが提示されるかどうかは、ディスプレイを通じて実装されます。 display の特定の値は、ステート マシンの display_name です
  • ステップ 3: クリック イベントを編集アイコンに追加します: ステート マシンの display_name の値を変更します。ステート マシンが変更されると、ページがロードされますすぐに、つまり、コントロール ボタンの表示と非表示
推奨される学習: 「

react ビデオ チュートリアル #」



以上がReactでボタンを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。