Estoy construyendo una especie de carrito de compras en React. Configuré algunos accesorios en el componente secundario y luego les pasé el estado cuando se usan en el componente principal. Hay varias cosas que quiero hacer, pero para empezar quiero actualizar la cantidad del artículo cuando se presionan los botones. Sé cómo funcionaría esto si estuviera codificado en el componente principal, pero estoy tratando de crear un componente secundario para hacer que el código sea más eficiente y descubrir cómo interactúan los componentes entre sí.
¿Se pueden manipular los accesorios del niño con eventos onClick aquí y usarse para cambiar el estado de diferentes cosas?
Si es así, ¿cómo hago eso?
¿Hay una forma lógica de crear esto, o hay una forma mucho más simple?
Sé que Redux usa administración de estado, pero quiero resolver esto en React por ahora.
class App extends React.Component { constructor(props) { super(props); this.state = { applesCount: 0, orangesCount: 0, peachesCount: 0, grapesCount: 0, applesPrice: 0.00, orangesPrice: 0.00, peachesPrice: 0.00, grapesPrice: 0.00 } } render() { return ( <> <h1 className="text-center">Grocery Store</h1> <div className="row text-center m-2"> <div className="col border border-primary m-2"> <Item fruitName='Apples' quantity={this.state.applesCount} price={this.state.applesPrice}/> </div> <div className="col border border-primary m-2"> <Item fruitName='Oranges' quantity={this.state.orangesCount} price={this.state.orangesPrice}/> </div> <div className="col border border-primary m-2"> <Item fruitName='Peaches' quantity={this.state.peachesCount} price={this.state.peachesPrice}/> </div> <div className="col border border-primary m-2"> <Item fruitName='Grapes' quantity={this.state.grapesCount} price={this.state.grapesPrice}/> </div> </div> </> ) } } class Item extends React.Component { render() { return ( <> <h1>{this.props.fruitName}</h1> <div>picture here</div> <div className="row d-flex justify-content-center"> <button>-</button> <h1>{this.props.quantity}</h1> <button>+</button> </div> <h2>${this.props.price}</h2> </> ) } } export default App;Pase una devolución de llamada al niño.
const Parent = () => { const [value, setValue] = useState('') return <Child setValue={setValue}/> } ... const Child = ({setValue}) => { // use setValue here which will update parent state }puedes hacer muchos tipos de solución para esto
pasando el método que hace setState a child y llámelo allí, luego puede actualizar el estado del padre que obtiene de los accesorios.
const Parent = () => { const [valor, setValue] = useState('') return (); }
const Niño = ({setValue}) => {}
hazlo con redux u otras bibliotecas de gestión de estado.