Estoy usando la biblioteca ReactSuperSelect para mi aplicación de reacción y encontré un momento que no puedo entender.
<ReactSuperSelect datasource={data} onChange={(item) => console.log(item)} /> Este console.log devolverá algo como esto: [{id: 'id of selected elem', name: 'name of selected elem'}] .
Pero cuando trato de hacer lo mismo en cualquier otro lugar (me refiero a que no está en el alcance del componente ReactSuperSelect), obtengo el objeto SyntheticBaseEvents .
Entonces, según tengo entendido, el evento onChange en ReactSuperSelect es algo así como una función de devolución de llamada, que devuelve algún valor y puedo usar este valor en un alcance mayor (corríjame si me equivoco).
Mi pregunta es: ¿cómo puedo emular el mismo comportamiento en mis componentes? Por ejemplo: <MyComponent onClick={(clickedElement) => console.log(clickedElement)} y obtenga el resultado como este {id: 'id', name: 'anyName'} .
PD: sé sobre clickedElement.target.value , pero quiero obtener una respuesta personalizada en lugar de SyntheticBaseEvents
Responder a los comentarios de coglialoro
Tengo que crear tales componentes:
import React from 'react'; const MyComponent = ({ onClick }) => { const myItem = { id: 'id', name: 'anyname', }; return <button onClick={() => onClick(myItem)}>Click</button>; }; export default MyComponent; import React from 'react'; import MyComponent from './MyComponent'; import './style.css'; export default function App() { return ( <div> <MyComponent onClick={(clickedElement) => console.log(clickedElement)} /> </div> ); }