He hecho un carrito de compras en reaccionar. He asignado un valor a cada botón. El valor se muestra en el dom, así que sé que está ahí.
Creé una función para capturar el valor y luego insertarlo en una matriz. Sin embargo, cuando presiono agregar al carrito, dice "nada agregado". He estado tratando de encontrar una manera de escuchar el valor en el detector de eventos, pero nada parece funcionar.
He intentado poner solo e.target.value pero el resultado es el mismo.
¿Algunas ideas?
const [item, setItem] = useState([]); function addCart(e) { if (e.target.value === "") { item.push(e.target.value); console.log(item); setCart(cart + 1); } else { console.log("nothing added"); } } <button value={pro.price} onClick={addCart} className="bg-blue-500 text-white font-bold border-white p-2 rounded-md" > {"add to cart"} </button>Creo que necesitas negar la condición en el bloque if . e.target.value !== ""
Si desea actualizar su item de estado, debe usar setItem .
function addCart(e) { if (e.target.value !== "") { setItem([...item, e.target.value]); console.log(item); setCart(cart + 1); } else { console.log("nothing added"); } }Le sugiero que cambie su enfoque y use una class en lugar de una function como tal:
class AddCard extends React.Component { constructor(props) { super(props) this.state = { value: 'VALUE' } } handleChange (e) { console.log('handleChange called') } handleClick () { this.setState({value: 'UPDATED_VALUE'}) var event = new Event('input', { bubbles: true }); this.myinput.dispatchEvent(event); } render () { return ( <div> <input readOnly value={this.state.value} onChange={(e) => {this.handleChange(e)}} ref={(input)=> this.myinput = input}/> <button onClick={this.handleClick.bind(this)}>Change Input</button> </div> ) } } ReactDOM.render(<AddCard />, document.getElementById('app')) Al hacerlo, podrá disociar el evento de click y el evento de change .