Acabo de comenzar con los ganchos de React y trato de tener 3 botones en los que puedo hacer clic y debería decirme cuántas veces se hizo clic. Puedo hacer que funcionen por separado, pero eso no es eficaz.
Por lo tanto, buscaba hacerlo útil con solo dos clases: una para los botones y otra para la contraparte. Pero ahora tengo problemas para llamar a las funciones y separar (en cuál se hace clic) los botones.
import React, { useState } from "react"; import Counter from "./Counter"; const Buttons = () => { const HandleClick = () => { setCounter(count + 1); }; const [count, setCounter] = useState(0); return ( <div> <button className={"GoodBtn"} onClick={HandleClick}> Good </button> <button className={"NeutralBtn"} onClick={HandleClick}> Neutral </button> <button className={"BadBtn"} onClick={HandleClick}> Bad </button> </div> ); }; export default Buttons; import React, { useState } from "react"; import Buttons from "./Buttons"; const Counter = () => { const [count, setCount] = useState(0); const teller = () => count + 1; return ( <div> <h2>Statistics</h2> <p>Good {Buttons.count}</p> <p>Neutral {Buttons.count}</p> <p>Bad {Buttons.count}</p> </div> ); }; export default Counter;import React, { useState } from 'react'; import Counter from "./Counter"; const Buttons = () => { const[count,setCounter]= useState({ good: 0, neutral: 0, bad: 0 }); const HandleClick = (key) =>{ setCounter(state => ({...state, [key]: state[key] + 1})); } return ( <div> <button className={"GoodBtn"} onClick={HandleClick('good')}>Good</button> <button className={"NeutralBtn"} onClick={HandleClick('neutral')}>Neutral</button> <button className={"BadBtn"} onClick={HandleClick('bad')}>Bad</button> <Counter counts={count} /> </div> ) } export default Buttons; import React, { useState } from 'react'; import Buttons from "./Buttons"; const Counter = (props) => { return( <div> <h2>Statistics</h2> <p>Good {props.counts.good}</p> <p>Neutral {props.counts.neutral}</p> <p>Bad {props.counts.bad}</p> </div> ) } export default Counter;No puedes simplemente hacer Buttons.count . Buttons es un componente de React, que debe crearse primero, como: <Buttons /> .
Si desea envolver su componente de botón con un contador, simplemente puede hacer:
const CountableButton = ({ onCounterChange, ...props }) => { const [count, setCounter] = useState(0); const handleClick = (event) => { //to correctly change state variable based on previous value setCounter((prevCounter) => prevCounter + 1); }; //Every time count changes trigger the onCounterChange function React.useEffect(() => { onCounterChange(count); }, [count]); return ( <button {...props} onClick={handleClick}> Good </button> ); };Y lo usarás como:
const App = () => { const [count, setCount] = useState(0); return ( <div> <h2>Button clicked {count} times</h2> <CountableButton onCounterChange={(value) => setCount(value)} /> </div> ); };