Моя функция удаления не будет работать с помощью реакции

Question

Кнопка «Удалить». Не работает с помощью реагирования.

. Я могу сделать вызов axios для удаления в почтальоне, но когда я пытаюсь сделать это на внешнем интерфейсе в реакции, моя функция удаления не будет работать.

<button onSubmit = {this.handleSubmit}> Delete </button>

---

// below is the function I'm trying to use to delete an item from my database

async handleSubmit(event)  { 
        event.preventDefault()
        await axios.delete(`http://localhost:3000/brands/${this.props.match.params.brand_id}/guitars/${this.props.match.params.id}`)
      console.log("pressed")
    }

// the backend is built in ruby and in postman the delete route works

Я не понимаю, почему кнопка не работает.

Я ожидал, что получу сообщение об ошибке при обновлении страницы, поскольку определенный элемент (гитара) и URL-адрес больше не находятся в базе данных, ИЛИ, мой маршрут перенаправления будет работать, и я буду перенаправлен на страницу, отображающую всепредметы (гитары) определенной марки.

Answer 1

Изменить на onClick, а не onSubmit.Кнопка не имеет события onSubmit

 async handleSubmit(event)  { 
      event.preventDefault()
      await axios.delete()
      console.log("pressed")
  }


  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
         <button onClick={(e) => this.handleSubmit(e)}> Delete </button>
      </div>
    );
  }

Код здесь