Estoy estudiando para convertirme en desarrollador front-end y ahora reaccionar está en el menú. Necesito crear una aplicación de reacción que tenga una lista de compras y un carrito de compras. Puedo agregar artículos a la lista de compras y eventualmente puedo hacer clic en ellos para transferirlos al carrito de compras.
Toda la experiencia de reaccionar en forma de árbol es bastante nueva y abrumadora. Pero mi pregunta es, necesito agregar los datos que obtengo de un campo de entrada a un UL/LI.
Tengo un componente GroceryList, un componente InputField, un componente List y un componente ListItem.
El código que tengo ahora para InputField funciona pero muestra la información directamente en la pantalla y no al enviarla.
El código es:
import React, { useState } from "react"; import { ReactDOM } from "react"; function InputField(props) { return ( < div > <form> <input type="text" onChange={(event) => props.setGroceryName(event.target.value)} /> <button type="submit" >Add Groceries</button> </form> </div > ) } export default InputFieldDefiní setGroceryName en el componente GroceryList. ¿Alguien puede ayudarme con cómo puedo cambiarlo para que haga una lista en el componente Lista? Estoy realmente atascado y parece que no puedo encontrar una buena ayuda. O qué debo hacer y dónde debo colocarlo para que tome un ListItem y lo agregue al componente List.
Gracias por adelantado. Si necesitan más información, háganmelo saber.
import React, { Component } from 'react' export default class Test extends Component { state = { grocery: '', groceryList: [] } render() { return ( <div> <form> <input type="text" onChange={(e) => this.setState({ grocery: e.target.value })} /> <button type="submit" onClick={e => this.setState({ groceryList: [...this.state.groceryList, this.state.grocery], grocery: '' })}>Add Groceries</button> </form> </div> ) } }Debe establecer Estado para cada vez que el texto cambie para un nuevo artículo de comestibles y, cuando haga clic en el botón, agréguelo a la matriz de lista de comestibles y establezca el texto inicial en una matriz vacía.