0
143
Vistasevento de activación react.js dentro de otro componente al hacer clic en el botón
Estoy construyendo mi primera aplicación web con reaccionar. Es un chat con múltiples salas de chat. Esto es lo que obtuve visualmente:
Ahora simplemente quiero hacer clic en "abrir" en cualquier sala y mostrar los mensajes dentro de esa sala de chat dentro del div blanco a la derecha que actualmente dice "HOLA MAMÁ".
Pero estos dos son componentes diferentes.
Esta es la lista de salas de chat:
export default function ChatRoomList({param1}) { const [chatRooms, setChatRooms] = React.useState([]); React.useEffect(()=>{ (async () => { var x = await getChatRoom(param1) console.log(x) setChatRooms(x) })() },[]) return ( <div className='chatRoomView'> {chatRooms.map((chatRoom , index) => { return ( <ul > <li key={index}> <table> <tr> <td> ChatroomID: {chatRoom.chatIDFromTableChats} <br></br> Username: {chatRoom.userNameUser2} </td> <td> <Button variant="contained" onClick={() => loadChatRoomFromID(chatRoom.chatIDFromTableChats)}>open</Button> </td> </tr> </table> </li> </ul> ) })} </div> ); } function loadChatRoomFromID(ID) { alert(`chatRoomID: ${ID}`); }Al hacer clic en el botón, actualmente solo puedo abrir una alerta que muestra la ID del elemento en el que se hizo clic.
Aquí está el componente dos:
export default function ChatMessages() { function loadMessages(ID){ // HELP NEEDED?! } return <div class='mainChatView'>HI MOM</div>; }Como puede ver, hay una función llamada "loadMessages ()" pero no hace nada ya que necesita pasar el parámetro ID y luego comenzar a cargar los mensajes de cada habitación.
Falta la conexión de uno a otro componente y hasta ahora, ninguna respuesta sobre la que leí no me falló miserablemente...
¿Puede alguien darme un ejemplo de código de trabajo y explicar lo que está sucediendo?
¡Gracias!
1 Respuestas
Responde la pregunta0
En React, los datos solo se pueden transmitir de padre a hijo a través de accesorios (consulte la nota al final para obtener más detalles al respecto), no de hermano a hermano. Sin embargo, esto no significa que los hermanos no puedan causar actualizaciones entre sí, solo significa que necesita reestructurar un poco su código para que los datos fluyan correctamente.
Puede almacenar la ID de la sala de chat activa en el padre de la lista y las vistas detalladas y dejar que la vista de lista actualice la ID mientras que la vista detallada usa la ID para cargar mensajes.
Aquí hay un ejemplo simple:
function Chat() { const [activeRoomID, setActiveRoomID] = React.useState(null); const onActiveChange = React.useCallback((id) => { setActiveRoomID(id); }, []); return ( <div> <ChatRoomList onActiveChange={onActiveChange}/> <ChatMessages id={activeRoomID}/> </div> ) } function ChatRoomList({ onActiveChange }) { // ... return ( <div> {chatRooms.map(chatRoom => ( <div key={chatRoom.chatIDFromTableChats}> <div>ChatroomID: {chatRoom.chatIDFromTableChats}</div> <Button onClick={() => onActiveChange(chatRoom.chatIDFromTableChats)}>Open</Button> </div> ))} </div> ) } function ChatMessages({ id }) { // load messages for `id` and display } Tenga en cuenta que los datos solo fluyen desde el componente <Chat> a sus elementos secundarios.
Nota sobre los datos que solo fluyen de padre a hijo: hay complejidades adicionales en esta declaración. Como muestra este ejemplo, los niños también pueden pasar datos a sus padres, pero solo mediante el uso de una función de devolución de llamada proporcionada a través de accesorios, por lo que las partes específicas de React solo permiten que los datos fluyan hacia abajo. Además, la API de contexto permite pasar datos a descendientes profundos (no solo a niños).