Página emergente abierta en ONCLICK Evento de componente reaccionar -- reactjs camp Relacionados El problema

Open popup page on onClick event of component react


4
vote

problema

Español

Tengo un componente que hace una tabla.

Cada fila de la tabla tiene un botón que está diseñado para abrir una página detallada de la fila seleccionada.

¿Cómo puedo hacer reaccionar abrir una página emergente en el evento ONCLICK del botón de la fila dada, pasando algunos parámetros?

  X0  
Original en ingles

I have a component that renders a table.

Each row of the table has a button which is designed to open a detailed page of the row selected.

How can I make react open a popup page on the OnClick event of the button of the given row, passing some parameters?

import React from 'react';  const Benchmarks = ({ indicator_name , indicator_desc, indicator_bench, indicator_approx_date, indicator_avg_field, detail_link}) => {   const handleClick = (e)=> {     console.log(e)     //how to open pop up page passing parameters?         }      return(         <tr>             <td>{indicator_name}</td>             <td>{indicator_desc}</td>             <td>{indicator_bench}</td>             <td>{indicator_approx_date}</td>             <td>{indicator_avg_field}</td>             <td>                  <button                      onClick={() => handleClick(detail_link)}>                     {"Detailed Map"}                 </button>             </td>         </tr>     ); }  export default Benchmarks; 
  

Lista de respuestas

8
 
vote
vote
La mejor respuesta
 

Su componente funcional no es válido. Pasa por este enlace.

https://reactjs.org/docs/components-and-props.html < / a>

Si ya consciente de esto y conoce el concepto de accesorios de JavaScript y reaccional, levante el estado

  volatile2  

dentro del parentonente volatile3 es la función que actualice volatile4 State y Passit como accesorios ahora en puntos de referencia

https://reactjs.org/tutorial/tutorial.html#lifting- estado up

 

Your functional component is invalid. Go through this link.

https://reactjs.org/docs/components-and-props.html

If your already aware of this and know javascript and React's props concept then lift up state

const Benchmarks = ({ indicator_name , indicator_desc, indicator_bench, indicator_approx_date, indicator_avg_field, detail_link,handleClick, showModal}) => {       if(showModal) {       return <ModalComponent/>     }     return(         <tr>             <td>{indicator_name}</td>             <td>{indicator_desc}</td>             <td>{indicator_bench}</td>             <td>{indicator_approx_date}</td>             <td>{indicator_avg_field}</td>             <td>                  <button                      onClick={() => handleClick(detail_link)}>                 </button>             </td>         </tr>     ); } 

Inside parentComonent handleClick is function that update showModal state and passit as props now in Benchmarks

https://reactjs.org/tutorial/tutorial.html#lifting-state-up

 
 
 
 

Relacionados problema

0  Integración de la solicitud de Axios basada en clase al código basado en gancho  ( Integrating class based axios request to the hook based code ) 
¿Cómo puedo integrar esta solicitud de Axios basada en clase al otro código basado en gancho que obtiene datos de un archivo JSON? Básicamente, quiero reempla...

84  Los manipuladores de eventos en reaccionan componentes sin estado  ( Event handlers in react stateless components ) 
Tratando de averiguar una forma óptima de crear manipuladores de eventos en reaccionar componentes sin estado. Podría hacer algo así: const myComponent = (...

1  ¿Cómo puedo poner un formulario de reactjs-bootstrap y la etiqueta H1 lado a lado  ( How can i put a reactjs bootstrap form and h1 tag side by side ) 
Quiero colocar mi grupo de formulario y mi etiqueta H1 lado a lado horizontalmente. He intentado usar la pantalla: bloque en línea y otras cosas, pero sin sue...

0  Reacciona URL de panel compartable  ( React sharable panel url ) 
Considerar mi siguiente fragmento. En este momento, haga clic en el botón, se abre un DIV-THE que carga otro componente. La URL es simplemente ' http: /// loc...

0  Haga un bucle para mostrar el objeto de datos de la API en Render usando gráficos reaccsjs  ( Make a for loop to show data object from api in render using charts reactjs ) 
Necesito mostrar algunos datos de la API en el gráfico reaccionar ( https : //canvasjs.com/react-charts/chart-index-data-label/ ) Esta es mi API en frente: ...

0  La función de despacho simulada no se llama  ( Mock dispatch function is not called ) 
Estoy escribiendo una prueba para el creador de acción de ASYNC, pero encontró un problema donde se declara "Función de simulacros esperada para que se haya ...

2  Configuración de reaccionar StyleGuidist con Siguiente.js y TypeScript  ( Setting up react styleguidist with next js and typescript ) 
Estoy tratando de configurar reaccionar StyleGuidist con Siguiente.js y TypeScript, pero sigo caminando en problemas. My actualyguide.config.js se ve así: ...

1  ¿Cómo agregar a una aplicación de reacción usando Vanilla Javascript?  ( How to append to a react app dom using vanilla javascript ) 
Estoy creando una extensión de cromo que me permite resaltar texto desde cualquier sitio web. solo para darte una idea public String showCourse(Course c)...

0  Cómo enviar un formulario en reaccionar  ( How to submit a form in react ) 
Quiero saber si es posible enviar un formulario que no está en el componente reaccionar por Fetch en el componente de reacción. <form action="json.bc" clas...

0  Reaccionar - ¡Niños que acceden a los padres estado demasiado pronto?  ( React children accessing parents state too early ) 
Cuando utilice una devolución de llamada de un niño a App.js, la función de devolución de llamada en App.js establece el estado de un elemento. En la misma fu...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos