Quiero crear un componente de contador para usarlo varias veces y quiero crear un componente de botón o un botón en app.js para restablecer todos los componentes. Así que creé el componente de contador, pero no entiendo cómo crear el botón. Creé un botón de reinicio individual para cada componente. Pero no puedo crear el botón de reinicio que reiniciará todo. Lo intenté de muchas maneras, pero fracasé.
Aquí está mi componente contador:
import { useCallback, useState } from 'react'; import Button from './Button'; import ShowCount from './ShowCount'; export default function ReactCounter({num}) { const [count, setCount] = useState(0); const resetCounter = () => { setCount(0); }; const incrementByOne = useCallback(() => { setCount((prevCount) => prevCount + num); }, [num]) return ( <div className="app"> <ShowCount count={count} title = "Counter 1" /> <Button handleClick={incrementByOne}>Increment By One</Button> <Button handleClick={resetCounter}>Reset</Button> </div> ) }
Este es el archivo app.js:
import ReactCounter from './components/ReactMeth'; import Title from './components/Title'; export default function App() { return ( <div className="app"> <Title /> <ReactCounter num={10} /> <ReactCounter num={2} /> <ReactCounter num={1} /> </div> ) }
Y aquí están los otros componentes:
ShowCount.js
import React from 'react'; function ShowCount ({count, title}) { console.log(`rendering ${title}...`); return( <p> {title}: {count} </p> ) } export default React.memo(ShowCount);
Botón.js
import React from 'react' function Button({handleClick, children}) { return ( <p> <button type='button' onClick={handleClick}> {children} </button> </p> ) } export default React.memo(Button)
Puede usar un estado de uso para controlar cuándo restablecer todos los campos. Esta es una forma de hacerlo que es bastante básica, pero hace el trabajo. Es solo un useState que está conectado a todos los contadores, y cada vez que cambia de valor (lo que sucederá cuando haga clic en el botón 'restablecer todo' en linje 12 en App.js), los contadores usarán un useEffect y activarán un puesta a cero de su contador.
ReactCounter.js
import { useCallback, useEffect, useState } from "react"; import Button from "./Button"; import ShowCount from "./ShowCount"; export default function ReactCounter({ num, reset }) { const [count, setCount] = useState(0); const resetCounter = () => { setCount(0); }; useEffect(() => { setCount(0); }, [reset]); const incrementByOne = useCallback(() => { setCount((prevCount) => prevCount + num); }, [num]); return ( <div className="app"> <ShowCount count={count} title="Counter 1" /> <Button handleClick={incrementByOne}>Increment By One</Button> <Button handleClick={resetCounter}>Reset</Button> </div> ); }
Aplicación.js
import { useState } from "react"; import ReactCounter from "./components/ReactCounter"; export default function App() { const [resetAll, setResetAll] = useState(0); return ( <div className="app"> <ReactCounter num={10} reset={resetAll} /> <ReactCounter num={2} reset={resetAll} /> <ReactCounter num={1} reset={resetAll} /> <button onClick={() => setResetAll(resetAll === 1 ? 0 : 1)}> reset all </button> </div> ); }