react mysql增删改查_react增删改查

react增删改查

import React, { Component } from 'react'

import axios from 'axios'

export default class List extends Component {

constructor() {

super()

this.state = {

list: [],

username: "",

age: ""

}

}

componentDidMount() {

this.find()

}

handleChange = e => {

this.setState({

[e.target.id]: e.target.value

})

}

find = () => {

axios.get("http://localhost:3001/list").then(res => {

this.setState({

list: res.data

})

})

}

add = () => {

axios.post("http://localhost:3001/list", {

username: this.state.username,

age: this.state.age

}).then(res => {

this.find()

})

}

del = (id) => {

axios.delete("http://localhost:3001/list/" + id).then(res => {

this.find()

})

}

update = (item) => {

let value = prompt("请输入修改内容..",item.username+","+item.age)

if(value){

var arr = value.split(",")

//派发 patch请求

axios.patch("http://localhost:3001/list/"+item.id,{

username:arr[0],

age:arr[1]

}).then(res=>{

this.find()

})

}

}

select = () => {

axios.get("http://localhost:3001/list?username_like=" + this.state.username).then(res => {

console.log(res)

this.setState({

list: res.data

})

})

}

render() {

let { list, username, age } = this.state

return (

用户名：

年龄：

添加

查询

{

list.map((item, index) => {

return

{item.username}---{item.age}

删除

修改

})

}

)

}

}