¿Cómo habilitar el botón basado en la declaración If en React.js?

Para mostrar el botón de forma condicional usando la instrucción if y else, podemos usar state en react.js. Declare el estado en el método constructor porque se carga primero cuando se carga el componente. Para alternar entre usuario y administrador, necesitamos usar un controlador de eventos. Usando este controlador de eventos, podemos alternar el estado del usuario. A continuación se muestra la implementación del código para mostrarlo.
 

Ejemplo: 

  • demostración.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(
          <div>
          <h3> Welcome Admin </h3><span > 
          Is the user admin : 
          {this.state.isAdmin.toString()}</span>
           <br/>
          <button  onClick={this.toggleState}>
            Toggle between user and admin
          </button>    
          </div>
          )
          }
        else{
          return(
          <div>
          <h3> Welcome User </h3><span >
           Is the user admin : 
           {this.state.isAdmin.toString()}</span>
           <br/>
          <button  onClick={this.toggleState}>
            Toggle between user and admin
          </button>    
          </div>
          )          
        }       
      }
     }
      
     export default DemoUser
  • índice.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(
      <React.StrictMode>
        <DemoUser />
      </React.StrictMode>,
      document.getElementById('root')
    );
      
      
    serviceWorker.unregister();

Producción:
 

Publicación traducida automáticamente

Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *