ホームページ > 記事 > ウェブフロントエンド > Reactでボタンを非表示にする方法
React で隠しボタンを実装する方法: 1. ステート マシンを使用して "display_name" を設定します; 2. プレゼンテーション用にコントロール ボタンを div に配置します; 3. ステート マシンの値を変更して制御します。 display_name" ボタンを表示または非表示にするだけです。
このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。
反応でボタンを非表示にする方法は?
React はコントロール ボタンの表示と非表示を実現するために Diaplay を使用します
#効果は次のとおりです。
##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;
react ビデオ チュートリアル #」
以上がReactでボタンを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。