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>
)
}
定义数据模型
最新推荐文章于 2023-02-16 11:07:55 发布