Hướng dẫn button delete javascript - nút xóa javascript
|
How To Make A Delete Button In Javascript With Code Examples In this tutorial, we will try to find the solution to How To Make A Delete Button In Javascript through programming. The following code illustrates this. As we have seen, a large number of examples were utilised in order to solve the How To Make A Delete Button In Javascript problem that was present.
React.js xử lý delete
Tạo button xóa dữ liệu
Trước tiên ta cần tạo
handleDelete = (item) => {
const newsId = item.id;
console.log(newsId);
}
Xử lý xóa dữ liệu ở phía client
handleDelete = (item) => {
const newsId = item.id;
this.setState(prevState => ({
news: prevState.news.filter(elm => elm.id !== newsId )
}));
}
Xử lý xóa dữ liệu MySQL
/client/src/App.js handleDelete = (item) => {
const newsId = {
id: item.id
};
axios.post('/api/delete', newsId)
.then(res => {
this.setState(prevState => ({
news: prevState.news.filter(el => el.id !== item.id )
}));
})
.catch(error => console.log(error));
}
/app.js app.post('/api/delete', (req, res) => {
var sql = "DELETE FROM news "
+ "WHERE id='"+req.body.id+"'";
connection.query(sql, function(err, results) {
if (err) throw err;
res.json({news: results});
});
});
Tổng kết
/client/src/App.js
import React, { Component } from 'react';
import axios from 'axios';
import Modal from 'react-modal';
class App extends Component {
constructor (props) {
super(props);
this.state = {
modalIsOpen: false,
news: [],
id: '',
title: '',
description: '',
content: ''
}
};
componentDidMount() {
axios.get('/api/news')
.then(res => {
const news = res.data;
this.setState({ news: news.news });
})
.catch(error => console.log(error));
};
handleInputChange = (event) => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
};
handleInsertSubmit = (event) => {
event.preventDefault();
const newItem = {
id: '',
title: this.state.title,
description: this.state.description,
content: this.state.content
};
axios.post('/api/insert', newItem)
.then(res => {
let news = this.state.news;
news = [newItem,...news];
this.setState({ news: news });
})
.catch(error => console.log(error));
};
componentWillMount() {
Modal.setAppElement('body');
};
openModal = (item) => {
this.setState({
modalIsOpen: true,
id: item.id,
title: item.title,
description: item.description,
content: item.content
});
};
closeModal = () => {
this.setState({
modalIsOpen: false
});
};
handleEditSubmit = (event) => {
event.preventDefault();
const newUpdate = {
id: this.state.id,
title: this.state.title,
description: this.state.description,
content: this.state.content
};
axios.post('/api/edit', newUpdate)
.then(res => {
let key = this.state.id;
this.setState(prevState => ({
news: prevState.news.map(
elm => elm.id === key? {
...elm,
title: this.state.title,
description: this.state.description,
content: this.state.content
}: elm
)
}))
})
.catch(error => console.log(error));
};
handleDelete = (item) => {
const newsId = {
id: item.id
};
axios.post('/api/delete', newsId)
.then(res => {
this.setState(prevState => ({
news: prevState.news.filter(el => el.id !== item.id )
}));
})
.catch(error => console.log(error));
};
render() {
return(
/app.js const express = require('express');
const mysql = require('mysql');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
const connection = mysql.createConnection({
host: 'localhost',
user: 'reactUser',
password: '1234567',
database: 'reactmysql'
});
connection.connect(function(err){
(err) ? console.log(err) : console.log(connection);
});
app.get('/api/news', (req, res) => {
var sql = "SELECT * FROM news ORDER BY id DESC";
connection.query(sql, function(err, results) {
if (err) throw err;
res.json({news: results});
});
});
app.post('/api/insert', function(req, res) {
var sql = "INSERT "
+ "INTO news(title,description,content) "
+ "VALUES('"
+ req.body.title+ "','"
+ req.body.description + "','"
+ req.body.content+"')";
connection.query(sql, function (err, results) {
if(err) throw err;
res.json({news: results});
});
});
app.post('/api/edit', (req, res) => {
var sql = "UPDATE news SET "
+ "title='"+req.body.title+"',"
+ "description='"+req.body.description+"',"
+ "content='"+req.body.content+"'"
+ "WHERE id='"+req.body.id+"'";
connection.query(sql, function(err, results) {
if (err) throw err;
res.json({news: results});
});
});
app.post('/api/delete', (req, res) => {
var sql = "DELETE FROM news "
+ "WHERE id='"+req.body.id+"'";
connection.query(sql, function(err, results) {
if (err) throw err;
res.json({news: results});
});
});
app.listen(4000, () => console.log('App listening on port 4000'));
|
