react增删改查
<p>react增删改查</p><pre><code class="language-js">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.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,
age:arr
}).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 (
<div>
<label>用户名：<input id="username" value={username} onChange={this.handleChange} placeholder="请输入用户名"></input></label>
<label>年龄：<input id="age" value={age} onChange={this.handleChange} placeholder="请输入年龄"></input></label>
<button onClick={this.add}>添加</button>
<button onClick={this.select}>查询</button>
<ul>
{
list.map((item, index) => {
return <li key={index}>{item.username}---{item.age}
<button onClick={this.del.bind(this, item.id)}>删除</button>
<button onClick={this.update.bind(this, item)}>修改</button>
</li>
})
}
</ul>
</div>
)
}
}
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
请用今天的努力，让明天没有遗憾。<br><br>
来源：https://www.cnblogs.com/cupid10/p/14149440.html
頁:
[1]