@Quintis

Как отменить отправку формы?

Доброго времени суток , делаю корзину для интернет магазина.С помощью 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>
        )
    }
}
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега React
<button type="button" value="+">+</button>{el.quantity}<button type="button" value="-">-</button>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы