Reactjs按ID删除项目

Question

我的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}})}/>

网站视图的屏幕：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9QdHJLWC5wbmcifQ==” alt =“网站视图屏幕”>“ >>

我的reactjs项目有问题。我正在尝试使用添加，删除，编辑和排序选项的数据库数据创建表。添加数据已完成。删除选项未完成...

Answer 1

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