Q
Q
Quintis2020-01-14 12:25:25
React
Quintis, 2020-01-14 12:25:25

How to unsubmit a form?

Good day, I am making a basket for an online store. Using formspree, I want to send an order to the mail, but when the quantity of goods in the basket changes (this.quantityHandler(e,key)}>Quantity +{el.quantity}- ), the form is sent. How to make it so that the form is sent only after clicking on the button (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>
        )
    }
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Ukolov, 2020-01-14
@Quintis

<button type="button" value="+">+</button>{el.quantity}<button type="button" value="-">-</button>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question