时间戳

首页 > 解决方案 > Reactjs按ID删除项目

node.js - Reactjs按ID删除项目

问题描述

我的 reactjs 项目有问题。

我正在尝试使用带有添加、删除、编辑和排序选项的数据库数据创建一个表。添加数据已经完成。删除选项未成功完成，因为我只能通过手动输入 id 并按下按钮来删除行。我想为每一行制作按钮以删除记录。现在我有这个：

    import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component{

  state = {
    carowner: [],
    owner:
    {

        first_name:'',
        last_name:'',
        phone:'',
        email:''
    },
    delowner:
    {
      owner_id:''
    }
  }
componentDidMount()
{
 this.getOwners();
}
getOwners = _ =>{
  fetch('http://localhost:4000/owners')
  .then(response => response.json())
  .then(response => this.setState({ carowner: response.data }))
  .catch(err => console.error(err))
}
addOwner = _ =>
{
    const {owner} = this.state;
    fetch(`http://localhost:4000/owners/add?first_name=${owner.first_name}&last_name=${owner.last_name}&phone=${owner.phone}&email=${owner.email}`)
    .then(this.getOwners)
    .catch(err => console.error(err))
}

delOwner = _ =>
{
  const {delowner} = this.state;
  fetch(`http://localhost:4000/owners/delete?owner_id=${delowner.owner_id}`)
  .then(this.getOwners)
  .catch(err => console.error(err))
}


renderCarOwner = ({owner_id,first_name,last_name,phone,email}) => <tr key={owner_id}><td>{owner_id}</td><td>{first_name}</td><td>{last_name}</td><td>{phone}</td><td>{email}</td><td><button onClick={() => {this.delOwner()}}>va</button></td></tr>
render()
{
  const {carowner,owner,delowner} = this.state;
return(
  <div className="centerblock">
  <div>
  <input value={owner.first_name} onChange={e => this.setState({owner:{...owner, first_name: e.target.value}})}/>
    <input value={owner.last_name} onChange={e => this.setState({owner:{...owner, last_name: e.target.value}})}/>
    <input value={owner.phone} onChange={e => this.setState({owner:{...owner, phone: e.target.value}})}/>
    <input value={owner.email} onChange={e => this.setState({owner:{...owner, email: e.target.value}})}/>
    <button onClick={this.addOwner}>Add owner</button>


  </div>
  <table >
  <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Action</th> 
                </tr>
{carowner.map(this.renderCarOwner)}
</table>
  </div>
);
}
}
export default App;

手动 ID 输入字段

 <input value={delowner.owner_id} onChange={e => this.setState({delowner:{...owner, owner_id: e.target.value}})}/>

网站视图屏幕：

网站视图屏幕

标签： node.jsreactjs

解决方案

要删除的所有者的 id 可以作为输入传递，如下所示

<td><button onClick={(evt) => {this.delOwner(evt,delowner.owner_id)}}>va</button></td>

并且可以修改功能删除所有者

delOwner = (evt,owner_id) =>
{

  fetch(`http://localhost:4000/owners/delete?owner_id=${owner_id}`)
  .then(this.getOwners)
  .catch(err => console.error(err))
}

推荐阅读