Estoy trabajando en un componente de botón de reacción que recibe 1 función como accesorio para ejecutarse en el evento onClick
<Button onClick={() => console.log('hello')}>esto pasa como
<button onClick={onClick}> Say hello </button>Ha llegado un nuevo requisito, y necesitamos hacer un ping a nuestro servidor para ver cuántos usuarios realmente hacen clic en el botón, pero no todos los botones compartirán este comportamiento, ¿cuál sería una forma limpia de agregar una nueva propiedad y si está presente, ejecute ambas funciones al hacer clic
<Button onClick={() => console.log('hello')} track=true /> <button onClick={() =>{ if track trackClick() onClick() }}> Say hello </button>Cambie todo al componente principal. Tenga un estado que registre los conteos de los botones y haga que su función handleClick llame a la primera función y luego, según la información de la track , actualice el conteo. Button1, en este ejemplo, llamará a doThing primero y luego actualizará el conteo; Button2 solo llamará a la función y no actualizará el conteo.
const { useEffect, useState } = React; function Example() { const [ count, setCount ] = useState(0); useEffect(() => console.log(count), [count]); function doThing() { console.log('Thing'); } function handleClick(e) { const { track } = e.target.dataset; doThing(); if (track === 'true') setCount(count + 1); } return ( <div> <Button handleClick={handleClick} text="Button1" track={true} /> <Button handleClick={handleClick} text="Button2" track={false} /> </div> ); } function Button({ handleClick, text, track }) { return ( <button onClick={handleClick} data-track={track} >{text} </button> ); } ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>