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

我想通过Axios的删除请求删除特定对象：

这是我填写和获取对象信息的代码：

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
    });
  }
};

单击该行时，我会在输入字段中获取数据：

这是我的删除功能

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

要从字段中获取Id，我有一个输入隐藏字段，如下所示：

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

；

填写字段后，我想根据ID删除此对象，我单击该行：

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

删除记录

我的控制台中出现以下错误：

TypeError:将循环结构转换为JSON

我试图像这样传递参数

{this.state.carId}

还是没有成功

我尝试过的解决方案：

---

如何根据输入字段中的ID删除对象？

您不必将

carId

作为参数传递，因为您正在将其保存到状态

通过调用

this.state.carId

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

---

您可以尝试执行

console.log（document.getElementById（“carId”））

？我怀疑您得到的是整个元素，而不仅仅是分配给它的值。我认为将其更改为

onClick={this.handleDelete（document.getElementById（“carId”）.value）}

将解决您的问题。

如果OP有许多行，并且每行都有删除按钮，该怎么办？如果它在映射中，您可以像data.map（item=>{delete record}）一样执行操作，这很好！非常感谢您抽出时间回答这个问题。很明显，carId存储在状态变量中。在这种情况下，如果您的代码失败，您最好编辑您的答案。