如何从输入字段获取ID并在ReactJS和Axios中通过该ID删除

Question

I want to delete a specific object with a DELETE request from Axios :

This is my code to fill and get the object information:

const rowEvents = {
  onClick: (e, row, rowIndex) => {
    this.setState({
      carId: this.state.cars[rowIndex].carId,
      brand: this.state.cars[rowIndex].brand,
      model: this.state.cars[rowIndex].model,
      color: this.state.cars[rowIndex].color,
      topSpeed: this.state.cars[rowIndex].topSpeed
    });
  }
};

When I click on the row I get the data in my input fields:

This is my delete function

handleDelete = carId => {
  axios
    .delete("https://localhost:44369/api/car/DeleteCar/", {
      params: { id: carId }
    })
    .then(response => {
      console.log(response);
    });
};

To get the Id from the field I have a input hidden field like this:

<input type="hidden" id="carId" value={this.state.carId} />;

After the fields are filled I want to delete this object based on the ID I click on the row:

 <button type="submit" className="btn btn-danger mr-1" onClick={this.handleDelete(document.getElementById("carId"))}> Delete record</button>

I get the following error in my console:

TypeError: Converting circular structure to JSON

I have tried to pass the parameter like this {this.state.carId}

Still no succes

Solutions I have tried:

how to delete a single item using axios in react

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

How to get the value of an input field using ReactJS?

How can I delete the object based on the ID in the input field?

Answer 1

You don't have to pass carId as a parameter because you are saving it to the state.

you can access the carId by calling this.state.carId

handleDelete = () => {
  axios
    .delete("https://localhost:44369/api/car/DeleteCar/", {
      params: { id: this.state.carId }
    })
    .then(response => {
      console.log(response);
    });
};

Answer 2

Can you try doing a console.log(document.getElementById("carId")) ? I suspect you are getting the whole element, not just the value that you assigned it. I think that changing it to onClick={this.handleDelete(document.getElementById("carId").value)} will fix your problem.