定义数据模型

import React, { useState, useRef, useEffect } from 'react'
import { nanoid } from 'nanoid'
export default function index ()
{
    useEffect(() =>
    {
        document.onkeydown = function (e)
        {
            if (e.keyCode == 13)  // 貌似 keyCode 被弃用了 有点小 bug
            {
                addPerson()
            }
        }
    }, [])
    const nameNode = useRef()
    const ageNode = useRef()
    const [DataModel, SetDataModel] = useState({
        // 定义数据模型
        height: '100vh',
        button: '不要背景了',
        backgroundColor: 'pink',
        list: [{ name: '羽神', age: 18, sex: '女' }],
    })
    const ChangeBackgroundColor = () =>
    {
        function getRandomIntInclusive (min, max)
        {
            min = Math.ceil(min);//返回小于一个数的最大整数 即一个数向下取整后的值
            max = Math.floor(max); //返回小于一个数的最大整数 即一个数向下取整后的值
            return Math.floor(Math.random() * (max - min + 1)) + min;
        } //含最大值，含最小值 

        let backgroundColor = DataModel.backgroundColor
        let height = DataModel.height == '100vh' ? '300px' : '100vh'

        switch (getRandomIntInclusive(1, 9))
        {
            case 1:
                backgroundColor = '#D24D57'
                break
            case 2:
                backgroundColor = '#26A65B'
                break
            case 3:
                backgroundColor = '#EB7347'
                break
            case 4:
                backgroundColor = '#2C3E50'
                break
            case 5:
                backgroundColor = '#84AF9B'
                break
            case 6:
                backgroundColor = '#FC9D99'
                break
            case 7:
                backgroundColor = '#AEDD81'
                break
            case 8:
                backgroundColor = '#00CCFF'
                break
            case 9:
                backgroundColor = 'pink'
                break
        }
        SetDataModel({ ...DataModel, backgroundColor, height, button: '不要背景了' })
    }
    const RemoveBackground = () =>
    {
        if (DataModel.button === '不要背景了')
        {
            if (window.confirm('真的不要我了吗'))
            {
                let { backgroundColor, ...NewDataModel } = DataModel  // 利用结构赋值 在不影响原变量的情况下删除一个且返回一个新的变量 
                SetDataModel({ ...NewDataModel, button: '我消失了' })
            }
        }
    }
    const change = (e) =>
    {
        const { value } = e.target
        SetDataModel({ ...DataModel, text: value })  // ES6 给 DataModel 添加一个属性
    }
    const addPerson = async () =>
    {
        try
        {
            const name = nameNode.current.value
            const age = ageNode.current.value
            let reg = /^\s*$/g
            if (!await nameNode.current.value)
            {
                return alert('名字都不会写吗')
            }
            if (!await ageNode.current.value)
            {
                return alert('赶紧输入年龄啊')
            }
            if (!reg.test(age) && !reg.test(age))
            {
                const personObj = { id: Boolean(Math.round(Math.random())), name, age }  // 随机生成 真假~
                SetDataModel({ ...DataModel, list: [...DataModel.list, personObj] })
                console.log(name);
                nameNode.current.value = null
                ageNode.current.value = null
            }
        } catch (err)
        {
            console.log(err);
        }
    }
    return (
        <div style={{ height: DataModel.height, backgroundColor: DataModel.backgroundColor, }}>
            <div style={{ textAlign: 'center' }}>
                <h1 >您输入的内容是：{DataModel.text}</h1>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
                <input type="text" onChange={change} />
                <button style={{ border: '1', borderColor: 'red', margin: 10 }} onClick={ChangeBackgroundColor}>切换背景颜色</button>
                <button style={{ border: '1', borderColor: 'red', margin: 10 }} onClick={RemoveBackground}>{DataModel.button}</button>
            </div>
            <div style={{ textAlign: 'center' }}>
                <h1>当前的学生信息:</h1>
                {
                    DataModel.list.map(data =>
                    {
                        return (
                            <div key={nanoid()}>
                                <h2>姓名:{data.name},年龄:{data.age}性别:{data.sex ? data.sex : data.id ? '男' : '女'}</h2>
                            </div>
                        )
                    })
                }
                <input type="text" ref={nameNode} placeholder="输入名字" />
                <input type="number" ref={ageNode} placeholder="输入年龄" />
                <button onClick={addPerson}>添加</button>
            </div>
        </div>
    )
}