Доброго времени суток , делаю корзину для интернет магазина.С помощью formspree хочу отправлять заказ на почту , но при изменении количества товара в корзине (this.quantityHandler(e,key)}>Quantity +{el.quantity}- ) происходит отправка формы. Как сделать так чтоб форма отправлялась только после нажатия на кнопку (Create order)
class Basket extends Component {
state = {
items:null,
modal:false
}
static getDerivedStateFromProps(props,state) {
let addedItems = [];
props.data.data.forEach(el=>{
return el.isAdded === true ? addedItems.push({...el}) : null
})
const stateUpdate = {
items:addedItems,
id:props.data.id
}
return stateUpdate;
}
quantityHandler=(e,key)=>{
let val = e.target.value
this.props.changeQuantiy(val,key)
}
clearBasketHandler = ()=> {
this.props.clearBasket()
}
render() {
return (
<div className="basket">
<h2> you choose { this.state.items.length < 1 ? ('no one'):this.state.items.length } item(s)</h2>
{this.state.items ? this.state.items.map(el=>{
let key = el.id
return (
//form
<ul className="basket-item" key={key}>
<li>For {el.gender}</li>
<img src={el.img} alt="clothes" />
<li>{el.type}</li>
<li>Price {el.price} $</li>
<li>Brand {el.brand}</li>
<li onClick={(e)=>this.quantityHandler(e,key)}>Quantity <button value="+">+</button>{el.quantity}<button value="-">-</button> </li>
</ul>
//form
)
}) : null }
{ this.state.items.length < 1 ? null : (<><button onClick={this.clearBasketHandler}>Clear a basket</button> <button onClick={this}>Create order</button></>)}
</div>
)
}
}