react如何隱藏按鈕

今天小編給大家分享一下react如何隱藏按鈕的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計(jì),成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為上千家服務(wù),創(chuàng)新互聯(lián)網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

react隱藏按鈕的實(shí)現(xiàn)方法：1、利用狀態(tài)機(jī)設(shè)置“display_name”；2、將控件按鈕放在div中進(jìn)行呈現(xiàn)；3、通過修改狀態(tài)機(jī)“display_name”的取值，來控制按鈕的呈現(xiàn)與隱藏即可。

React中通過diaplay實(shí)現(xiàn)控件按鈕的呈現(xiàn)與隱藏

1、實(shí)現(xiàn)效果

  • 通過單擊編輯圖標(biāo)實(shí)現(xiàn)頁面中對應(yīng)按鈕的呈現(xiàn)與隱藏、

  • 效果圖如下

react如何隱藏按鈕

react如何隱藏按鈕

react如何隱藏按鈕

2、代碼實(shí)現(xiàn)

import React, { Component } from 'react';
import '../../../style_css/antd.css';
import { Layout,Icon,Row, Col} from 'antd';
class Index extends Component {
   // 狀態(tài)機(jī)
   constructor(props, context) {
       super(props, context);
       this.state = {
           display_name: 'none', //此狀態(tài)機(jī)為display的取值
       }
   }
   display_name() { //編輯按鈕的單擊事件，修改狀態(tài)機(jī)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 style={{ background: '#fff', paddingTop: '20px', display: this.state.display_name }}>    {/* 通過狀態(tài)機(jī)display_name獲取diaplay取值 */}
                   <Row>
                       <Col span={12}>
                       </Col>
                       <Col span={12}>
                           <div style={{ float: 'right' }}>
                               <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">詳情</Button> </span>
                               <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">添加</Button></span>
                               <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">修改</Button></span>
                               <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large" >刪除</Button></span>
                               <span style={{ paddingLeft: '5px', paddingRight: '10px' }}><Button style={buttoncolor} size="large">查看關(guān)聯(lián)</Button></span>
                           </div>
                       </Col>
                   </Row>
               </div>
               {/* 通過icon實(shí)現(xiàn)編輯圖標(biāo) */}
               <div style={{ background: '#fff', paddingTop: '10px' }}>
                   <Row>
                       <Col span={23}>
                       </Col>
                       <Col span={1} onClick={this.display_name.bind(this)}> {/* 通過display_name函數(shù)來改變狀態(tài)機(jī)display_name的值來改變display取值 */}
                           <Icon type='edit' style={{ fontSize: '30px' }} />
                       </Col>
                   </Row>
               </div>
               {/* 頁面內(nèi)容 */}
               <Layout style={{ padding: '10px 0', background: '#fff' }}>
                   <Content style={{ padding: '0 24px', minHeight: 280 }}>
                       {this.props.children}
                   </Content>
               </Layout>
           </Layout>
       );
   }
}
export default Index;

  • display屬性可以控制內(nèi)容的呈現(xiàn)與隱藏，none表示隱藏，block表示呈現(xiàn)

  • 第一步：利用狀態(tài)機(jī)設(shè)置display_name

  • 第二步：控件按鈕放在div中進(jìn)行呈現(xiàn)，div內(nèi)容的呈現(xiàn)與否通過display實(shí)現(xiàn)，display具體取值取狀態(tài)機(jī)中的display_name

  • 第三步：給編輯圖標(biāo)添加單擊事件：修改狀態(tài)機(jī)display_name的取值，狀態(tài)機(jī)一旦改變頁面便會立即加載，即控制按鈕的呈現(xiàn)與隱藏

以上就是“react如何隱藏按鈕”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：react如何隱藏按鈕
分享地址：http://muchs.cn/article12/pieedc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、微信公眾號、網(wǎng)站內(nèi)鏈、Google、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名