0

¡Hola! Que tal estoy aprendiendo react y necesito ayuda con cambiar dos gráficas hechas en js dependiendo de un formulario hecho con bootstrap form.

Mi codigo en react es el siguiente:

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Titulo from './Titulo/Titulo';
import Form from 'react-bootstrap/Form';
import Dona_etiquetas from './Graficas/Dona_etiquetas';
import Dona_etiquetas2 from './Graficas/Dona_etiquetas2';
import Linear_etiquetas from './Graficas/Linear_etiquetas';
import Tabla_etiquetas from './Graficas/Tabla_etiquetas';
import { Link } from "react-router-dom";

function Seccion1Reporte1() {
    return (
        <>
            <Titulo texto="Reporte 1: Validación de Estructura del Reporte" />
            <Container fluid={true}>
                <Row>
                    <Col>
                        <Form.Group style={{ width: '100%' }}>
                            <Form.Control as="select" size="lg" custom>
                                <option>Seleccionar periodo</option>     
                                <option value="1mes">1 mes</option>
                                <option value="dos_once">2 - 11 meses</option>
                                <option value="doce">12 meses</option>
                            </Form.Control>
                        </Form.Group>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        
                        <h4><span class="lnr lnr-chevron-right"></span> Número de Errores de Estructura por etiqueta en reporte</h4>
                        <hr />
                        <Form.Group style={{ width: '50%' }}>
                            <Dona_etiquetas/>
                        </Form.Group>
                    </Col>
                </Row>
            </Container>
        </>
    )
}

export default Seccion1Reporte1;

Se ve las gráficas que importo a react, las cuales son: Dona_etiquetas y Dona_etiquetas2.

Abajo de las opciones se ve la grafica que importo con el pequeño codigo <Form.Group style={{ width: '50%' }}><Dona_etiquetas/>

La gráfica de la Dona1 se ve así:

introducir la descripción de la imagen aquí

La gráfica de la Dona2 y las opciones del componente de opciones se ve así: introducir la descripción de la imagen aquí

Si alguien puede ayudarme en como cambiar mis gráficas con el componente Form con las opciones, donde dice Seleccionar periodo, que se cambien las distintas gráficas dependiendo de que se escoja en las opciones

Tengo entendido que se hace con eventos, pero la verdad no se como. :c

Muchas gracias por la ayuda

3 respuestas 3

0

Tienes varias opciones, una puede ser tener los dos gráficos y mostrar uno o el otro de acuerdo a lo seleccionado:

<Form.Group style={ optionSelected != '1mes' ? { width: '50%', display: none } : { width: '50%' }}>
    <Dona_etiquetas />
</Form>
<Form.Group style={ optionSelected == '1mes' { width: '50%', display: none } : { width: '50%' }}>
    <Dona />
</Form>

Otra opción es mostrar el componente condicionalmente:

<Form.Group style={{ width: '50%' }}>
    {optionSelected == '1mes' ? <Dona /> : <Dona_etiquetas />}
</Form>

En ambos casos debes capturar el evento onChange así. En tu caso usando Hooks.

import React, { useState } from 'react';

function ... {
  const [optionSelected, setOptionSelected] = useState('1mes');

  const handleChange = event => {
    setOptionSelected(event.target.value);
  }

  return (
    ...
  )
}
7
  • Pero en el ejemplo de la pagina esta trabajando con una class y no me deja meter el evento: handleChange(event) { this.setState({value: event.target.value}); }
    – Endoeca
    Commented el 25 sept. 2020 a las 23:43
  • @Endoeca debes usar react hooks, edité la respuesta con un ejemplo. Commented el 26 sept. 2020 a las 0:00
  • ¿De dónde se construye la función optionSelected?
    – Endoeca
    Commented el 26 sept. 2020 a las 0:00
  • @Endoeca optionSelected es parte del state. Revisa el ejemplo de la respuesta. Commented el 26 sept. 2020 a las 0:02
  • <Form.Group style={{ width: '50%' }}> {optionSelected != '1mes' ? <Dona_etiquetas /> : <Dona_etiquetas2 />} En esa parte falta algo no?
    – Endoeca
    Commented el 26 sept. 2020 a las 0:13
0

Sigo sin lograr que me de las opciones, el código y las gráficas quedaron de la siguiente manera:

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Titulo from './Titulo/Titulo';
import Form from 'react-bootstrap/Form';
import Dona_etiquetas from './Graficas/Dona_etiquetas';
import Dona_etiquetas2 from './Graficas/Dona_etiquetas2';
import Linear_etiquetas from './Graficas/Linear_etiquetas';
import Tabla_etiquetas from './Graficas/Tabla_etiquetas';
import { Link } from "react-router-dom";
import { useState } from 'react';

function Seccion1Reporte1() {
    const [optionSelected, setOptionSelected] = useState('1mes');

    const handleChange = event => {
       setOptionSelected(event.target.value);
  }
    //const tablaHeader1 = ["Número de registro","Número de errores","Etiquetas erróneas","Mensaje de error"];
    //const tablaContenido1 = ["MT001", "4", "blc_aba", "Campo no es alfanumérico"];
    return (
        <>
            <Titulo texto="Reporte 1: Validación de Estructura del Reporte" />
            <Container fluid={true}>
                <Row>
                    <Col>
                        <Form.Group style={{ width: '100%' }}>
                            <Form.Control as="select" size="lg" custom>
                                <option>Seleccionar periodo</option>     
                                <option value="1mes">1 mes</option>
                                <option value="dos_once">2 - 11 meses</option>
                                <option value="doce">12 meses</option>
                            </Form.Control>
                        <Form.Group style={ optionSelected != '1mes' ? { width: '50%' } : { width: '50%' }}>
                            <Dona_etiquetas />
                        </Form.Group>
                        <Form.Group style={ optionSelected == '1mes' ? { width: '50%' } : { width: '50%' }}>
                            <Dona_etiquetas2 />
                        </Form.Group>
                        </Form.Group>
                    </Col>
                </Row>
                
            </Container>
        </>
    )
}

export default Seccion1Reporte1;

introducir la descripción de la imagen aquí

0

Me tarde mucho tiempo, pero por fin lo logre!!!

Por fin lo solucione

2
  • Por favor no utilices imágenes cuando necesites mostrar código. Colocar código como texto será de mayor utilidad para futuros usuarios ya que facilita el proceso de pruebas. Dejando de lado ese punto, es un gusto que tú mismo hayas encontrado la solución a tu problema. Felicidades y bienvenido a SOEs. Commented el 18 dic. 2020 a las 16:43
  • Claro lo tomare en cuenta, soy nuevo en la comunidad y estoy aprendiendo eso. Muchas gracias! :)
    – Endoeca
    Commented el 24 dic. 2020 a las 15:33

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.