react增删改查

最新推荐文章于 2025-06-28 14:05:20 发布

原创最新推荐文章于 2025-06-28 14:05:20 发布 · 2.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#python #net #cordova #solr #sharding

react 专栏收录该内容

40 篇文章

订阅专栏

博客主要介绍了React的增删改查功能，这是前端开发中常见且重要的操作，能帮助开发者更好地处理数据交互，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 (
            <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>
        )
    }
}