Question

我正在尝试在用户单击“删除”按钮后删除项目。通过handleDelete函数，当用户单击一本书时，我通过axios传递了一个id（idBooks）。如何从点击中撤出？

在下面，您将在Node js中找到React代码和后端端代码。

前端

(class extends React.Component {


handleDelete = (e) => {
    e.preventDefault();
    const { book } = this.props;
    axios.delete("http://localhost:8081/delete", book.idBooks )
    .then(res => {
      console.log(res.data);
    }).catch(err => {
      console.warn(err.warn);
    });
  };

  render() {
    const { book, classes } = this.props;
    const token = localStorage.getItem('token');

    return(
      <Paper className= { classes.marginTopBottom }>
       <h2 className={ classes.title }>
       { book.title }
       </h2><hr />
       <div className= { classes.scrollingDiv }>
       <p>
       { book.plot }
       </p>
       </div>
       <hr/>
       <div className={ classes.pStyle }>
       <p>Publish date:<br /> { new Date(book.publish_date).toLocaleDateString() }</p>
       <p>Author:<br /> { book.author }
       </p>
       <p>Genre:<br /> { book.genre }</p>
       </div>
       <div>
       { token && (
       <Button  className={ classes.delete } size="small" onClick={this.handleDelete} type="button" variant="contained" color="primary" 
        component= {Link} to="delete">
       Delete
       <DeleteIcon className={ classes.rightIcon } />
       </Button>
      )}
       </div>
       </Paper>
    )
  }
});

后端

const deleteBook = (req, res) => {
const connection = mysql.createConnection(connectionProperties);
connection.connect();
const query = `DELETE FROM Books WHERE idBooks = ${ req.body.idBooks }`;
connection.query(query, (err, res) => {
    if (err) {
        res.status(500).send(err);
    } else {
        res.status(200).send('Book deleted correctly.');
    }
});
};

Answer 1

我猜想传递参数可能会帮助您解决此问题。

在delete按钮上，向onClick={()=>this.handleDelete(e,book.idBooks)}添加一个参数
对handleDelete函数进行如下更改

handleDelete = (e,idBooks) => {
    e.preventDefault();
    axios.delete("http://localhost:8081/delete", idBooks )
    .then(res => {
      console.log(res.data);
    }).catch(err => {
      console.warn(err.warn);
    });
  };

Answer 2

我要添加一个道具onDeleteCallback，并在成功删除后调用带有已删除书号的函数。在父组件（列出了所有书籍）中，使用过滤出的书籍更新状态。

使用ReactJS删除项目

2 个答案: