0

Buen día! Tengo 2 div y 2 botones un boton es para que se muestre el segundo div y se muestre el primer div; el segundo boton es para que se oculte segundo div y se muestre el primero.

 constructor(props) {
    super(props);
    this.state = {checked: false}
    this.handleChange = this.handleChange.bind(this);
}

handleChange(checked) {
    this.setState({ checked});
  }
render() {
        return (

<div className="col-md-6  mb-2">
   <div className="btn-group btn-group-sm" role="group" aria-label="Basic example">

{/* Este es el boton 1 */}
      <button type="button" id="btn-nquote" className="btn btn-success btn-sm" onClick={this.handleChange} checked={this.state.checked}>Normal Quote</button>

{/* Este es el boton 2 */}
      <button type="button" id="btn-flex" className="btn btn-unique btn-sm" onClick={this.handleChange} checked={this.state.checked}>Flex Quote</button>
   </div>
 </div>

{/* Este es el div 1 */}
<div hidden={this.state.checked ?  false : true}></div>

{/* Este es el div 2 */}
<div hidden={this.state.checked ?  false : true}></div>
 );
}

Mi problema es que al presionar cualquiera de los dos botones me oculta el segundo div y ya no puedo volver a mostrar el primer div al presionar cualquiera de los dos botones.

Espero me puedan ayudar y quedo atento

2

2 respuestas 2

4

hola aqui ya te hice el codigo, la pagina que te puse es mia, esta TODA echa en react no fue nada facil mas esa parte pero aquí te lo dejo

el primer botón muestra un div, y el segundo botón oculta el primer div y muestra el segundo div si es así aquí te hice el código

import React, { Component } from "react";

class Ejemplo extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(checked) {
    this.setState({ checked });
  }
  render() {
    return (
      <div>
        <div className="col-md-6  mb-2">
          <div
            className="btn-group btn-group-sm"
            role="group"
            aria-label="Basic example"
          >
            {/* Este es el boton 1 */}
            <button
              type="button"
              id="btn-nquote"
              className="btn btn-success btn-sm"
              onClick={() => this.handleChange(false)}
            >
              Normal Quote
            </button>

            {/* Este es el boton 2 */}
            <button
              type="button"
              id="btn-flex"
              className="btn btn-unique btn-sm"
              onClick={() => this.handleChange(true)}
            >
              Flex Quote
            </button>
          </div>
        </div>
        <span>
          {this.state.checked ? (
            <div /* Este es el div 1 */ className="redd" />
          ) : (
            <div /* Este es el div 2 */ className="red2" />
          )}
        </span>


      </div>
    );
  }
}

export default Ejemplo;

y le agregue estilos a los div para diferenciarlos

.redd{
  width: 100px;
  height: 100px;
  background: red;
}
.red2{
  width: 100px;
  height: 100px;
  background: black;
}

espero que te funcione, yo lo probé y me funciono

1
  • Te agradezco mucho solo era cuestión de agregar true y false en las funciones de mis botones tal como lo tienes en tu código. GRACIAS. Commented el 28 may. 2019 a las 22:58
1

Te dejo otra solución empleando un solo botón y haciendo uso de los nuevos Hooks de React. Espero tambien te sirva.

import React, { useState } from 'react';

export default () => {
  const [show, setShow] = useState(true);

  return (
    <>
      <button
        type="button"
        onClick={() => {
          setShow(!show);
        }}
      >
        Mostrar {show ? 'Div 2' : 'Div 1'}
      </button>

      {show ? (
        <div style={{ color: 'red' }}>Div 1</div>
      ) : (
        <div style={{ color: 'blue' }}>Div 2</div>
      )}
    </>
  );
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.