用户列表新增删除

接口文件

axios

import axios from "axios"
axios.defaults.baseURL = "http://localhost:2345"
export default axios

Model

import axios from "./axios"


export default {
    query: (params) => {
        return axios({
            method: "get",
            url: "/userinfos",
            params
        })
    },
    add: (data) => {
        return axios({
            method: "post",
            url: "/userinfos",
            data
        })
    },
    del: (id) => {
        return axios({
            method: "delete",
            url: "/userinfos/" + id,
        })
    }
}

父组件

import React, { Component } from 'react'
import black from "../css/black2.module.css"
import userinfosModel from "../Model/userinfosModel"
import List from "../components/Menu9/list"
import Add from "../components/Menu9/add"
export default class Menu9 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            theme: black,
            list: []
        }
    }
    async   componentDidMount() {
        let { data } = await userinfosModel.query({})
        this.setState({
            list: data
        })

    }

    delid = async (id) => {
        let { data } = await userinfosModel.del(id)
        console.log(data)
        this.setState({
            list: this.state.list.filter(item => item.id != id)
        })
    }



    add = async (username, userpwd) => {
        // let username = username
        // let userpwd = userpwd
        let { data } = await userinfosModel.query({
            username
        })
        console.log(data)
        if (data.length) {
            alert("用户名已存在")
        } else {
            let { data } = await userinfosModel.add({
                username,
                userpwd
            })
            this.setState({
                list: [...this.state.list, data]
            })
            console.log(data)
        }
    }
    render() {
        return (
            <div>
//新增用户和密码
                <Add add={this.add}></Add>
                <div className={this.state.theme.table}>
                    <div className="tr">
                        <div className={this.state.theme.item}>编号</div>
                        <div className={this.state.theme.item}>用户名</div>
                        <div className={this.state.theme.item}>密码</div>
                        <div className={this.state.theme.item}>操作</div>
                    </div>
 //渲染列表
                    <List list={this.state.list} theme={this.state.theme} delid={this.delid}></List>
                </div>
            </div>
        )
    }
}

add组件

import React, { Component } from 'react'

export default class add extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <>
                <>
                    用户名<input type="text" ref="username" />密码<input type="text" ref="userpwd" /><button onClick={() => {
                        this.props.add(this.refs.username.value, this.refs.userpwd.value)
                    }}>新增</button>
                </>
            </>
        )
    }
}

list组件

import React from 'react'

export default ({ list, theme, delid }) => {
    return (
        <>
            {list.map(item => {
                return (<div className="tr" key={item.id}>
                    <div className={theme.item}>{item.id}</div>
                    <div className={theme.item}>{item.username}</div>
                    <div className={theme.item}>{item.userpwd}</div>
                    <div className={theme.item} onClick={() => {
                        delid(item.id)
                    }}>删除</div>
                </div>)
            })}

        </>
    )
}