如何根据 React.js 中的 If 语句启用 Button？

为了使用 if 和 else 语句有条件地显示按钮，我们可以在 react.js 中使用 state。在构造函数方法中声明状态，因为它在组件加载时首先加载。为了在用户和管理员之间切换，我们需要使用事件处理程序。使用这个事件处理程序，我们可以切换用户的状态。下面是显示它的代码的实现。

例子：

• 演示.js：

  Javascript

  import React, {Component} from 'react'
    
  class DemoUser extends Component {
    
     constructor(){
       super()
       this.state = {
        isAdmin: true
       }
    
       this.toggleState = this.toggleState.bind(this);
     }
       
     toggleState() {
     this.setState ({
      isAdmin:!this.state.isAdmin }
     )
    } 
    
    
       
     render(){
      if(this.state.isAdmin){
        return(
        
  
        
   Welcome Admin 
   
        Is the user admin : 
        {this.state.isAdmin.toString()}
         
  
        
          Toggle between user and admin
            
        
        )
        }
      else{
        return(
        
  
        
   Welcome User 
  
         Is the user admin : 
         {this.state.isAdmin.toString()}
         
  
        
          Toggle between user and admin
            
        
        )          
      }       
    }
   }
    
   export default DemoUser

  
  
  

• index.js：

  Javascript

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import DemoUser from './demo'
    
    
  ReactDOM.render(
    
      
    ,
    document.getElementById('root')
  );
    
    
  serviceWorker.unregister();
  

输出：