0
183
ViewsReaccionar, pasando el estado de un componente secundario al principal
Estoy aprendiendo React y me encontré con un problema. Estoy haciendo un montón de componentes de contador que se ven así:
El problema es que he definido el estado en cada uno de estos contadores, que son 3 de ellos, y me gustaría pasar el valor (número) al padre para poder sumar y mostrar el recuento total.
Aquí está mi componente de contador secundario:
import React, { useState } from "react"; const Counter = () => { const [count, setcount] = useState(0) const handleIncrement=()=>{ setcount(count+1); } const handleDecrement=()=>{ setcount(count+-1); } return ( <div> <button onClick={()=>{handleIncrement()}}>+</button> <span>{count}</span> <button onClick={()=>{handleDecrement()}}>-</button> </div> ); }; export default Counter;Y aquí está el padre al que quiero pasar mis valores para poder sumarlos y mostrar el total:
import React from 'react' import Counter from './Counter' const Counters = () => { return ( <> <h3>totalcount:</h3> <Counter/> <Counter/> <Counter/> </> ) } export default CountersLo que intenté fue hacer varios estados, pero no puedo encontrar una buena manera de hacerlo. Sé que hay una respuesta fácil para esto y lo estoy complicando demasiado. Si tienen otra optimización para mi código, por favor compartan.
1 answers
Answer question0
En estado React va de arriba a abajo. Un componente anidado puede actualizar el estado de un padre si se le ha pasado una función definida en el padre como accesorios. Lo que significa que lo que quieres hacer no es posible ya que tu código está configurado. Una forma de lograr lo que buscas es:
import React, { useState } from "react"; const Counter = ({count, setCount}) => { const handleIncrement=()=>{ setCount(count+1); } const handleDecrement=()=>{ setCount(count+-1); } return ( <div> <button onClick={()=>{handleIncrement()}}>+</button> <span>{count}</span> <button onClick={()=>{handleDecrement()}}>-</button> </div> ); }; export default Counter; import React, { useState } from 'react' import Counter from './Counter' const Counters = () => { const [countOne, setCountOne] = useState(0) const [countTwo, setCountTwo] = useState(0) const [countThree, setCountThree] = useState(0) return ( <> <h3>totalcount: {countOne + countTwo countThree} </h3> <Counter count = {countOne} setCount = {setCountOne} /> <Counter count = {countTwo} setCount = {setCount} /> <Counter count = {countThree} setCount = {setCountThree} /> </> ) } export default Counters