Parece que no puedo consolar. registrar ninguna selección de un onClick para este componente de React. Estoy tratando de lograr básicamente lo siguiente.
https://codesandbox.io/s/great-ardinghelli-6seko?file=/src/demoComponent.jsx
Los datos se obtienen de redux y aparecen en la interfaz (lo tengo funcionando).
Me gustaría lograr eso cuando selecciona una línea, solo consola.logs ('ha seleccionado' rol).
Sin embargo, no parece que pueda obtener CUALQUIER dato para activar un onClick cuando se trata de una fuente de datos asignada.
Implementé una etiqueta ap que se dispara y funciona como se esperaba.
Consulte el siguiente código refinado:
import React, { useRef } from "react"; import styled from "styled-components"; const SearchContent = styled.div` width: 100%; height: 100%; display: flex; flex-direction: column; padding: 1em; overflow-y: auto; `; const JobContainer = styled.div` width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 5px 5px; `; export function SearchBarTrialRedux(props) { const inputRef = useRef(); const [term, setTerm] = useState("") const handleClickRole = () => { console.log("Hello, you have selected" ) } const searchResults = useSelector(state => state.jobsearch.roles.map(role => role.title)) const SearchResultsText = ({ text }) => { return ( <JobContainer onClick={()=> { console.log("Hello") }}> <JobSearchTypography > {text} </JobSearchTypography> </JobContainer> ); }; return ( <SearchContent> <JobContainer > {searchResults && searchResults.length < 3 && searchResults.map((result) => (<IndividualContainer handleClick={handleClickRole}> <SearchResultsText text={result}/> </IndividualContainer> ) )} </JobContainer> <p onClick={handleClickRole}> fff </p> </SearchContent> )¿Alguien sabe por qué esto no funciona + cómo lograr la solución? Estoy un poco perdido aquí!
Como se puede ver en su fragmento de código, la función handleClickRole simplemente imprime en la consola el mensaje "Hola, ha seleccionado". No se le pasa ninguna variable para imprimirlo. Esto se puede cambiar así:
const handleClickRole = (role) => { console.log(`Hello, you have selected ${role}`); }Además, creo que la forma en que llama a la función anterior en el evento onClick está incompleta. Sería mejor si se viera así:
<p onClick={() => handleClickRole(role)}>fff</p> // considering that you want to pass a variable with the roleo
<p onClick={() => handleClickRole()}>fff</p> // without a variablePor favor, mire también el siguiente ejemplo:
import { useState } from "react"; export default function App() { const [myInput, setMyInput] = useState(""); const [isButtonClicked, setIsButtonClicked] = useState(false); const handleChange = (event) => { setIsButtonClicked(false); setMyInput(event.target.value); }; const handleClick = () => { setIsButtonClicked(true); console.log(myInput); }; return ( <div className="App"> <input onChange={handleChange} id=".myInput" placeHolder="Enter Something" /> <button style={{ display: "block", width: "100px", margin: "10px auto", }} onClick={() => handleClick()} > OK </button> <p style={{ fontWeight: "bold" }}> The entered value is: <span style={{ fontWeight: "400" }}> {isButtonClicked ? ` ${myInput}` : null} </span> </p> </div> ); }el <IndividualContainer>...</IndividualContainer> es un componente creado por usted, ¿verdad?
en caso afirmativo, tendrá que llamar a la función onClick en el componente de la siguiente manera: dentro del componente IndividualContainer
... // the outer container <div onClick={props.handleClick}> ... </div> ...déjame saber si funciona
Acabo de editar mi respuesta ahora