首先我们需要在项目中创建一个home文件夹用于存储文件，然后在再在文件中创建home.jsx和index.less的格式。
然后接下来就是直接上代码
import React, {
useState, useEffect } from "react";
import {
NavBar, Space, Input, AutoCenter, Button, Toast } from "antd-mobile";
import {
useHistory, useLocation } from 'umi';
import "./index.less";
import Draggable from "react-draggable";
import {
nanoid } from "nanoid";
import img1 from '@/images/img1.jpg'
import img2 from '@/images/img2.jpg'
import img3 from '@/images/img3.jpg'
import img4 from '@/images/img4.jpg'
import img5 from '@/images/img5.jpg'
export default function App() {
const location = useLocation();
const state = location.query;
const [wish, setWish] = useState("");
const [wishlist, setList] = useState([]);
const [wishstyle, setStyle] = useState("");
const [vals, setval] = useState();
const [disabled, setDisabled] = useState(true);
// 拖拽记录
const eventLogger = (e, data) => {
console.log(`data`, data);
wishlist.forEach(function (value, key) {
if (value.id == vals) {
// console.log(`value`, value);
// console.log(`value`, vals);
let list = {
id: value.id,
value: value.value,
color: value.color,
x: data.lastX,
y: data.lastY,
};
wishlist.splice(key, 1, list);
localStorage.setItem("xinyuan", JSON.stringify(wishlist));
setList([...wishlist]);
}
});
};
const TextDecoder = (val, index) => {
console.log(`val`, val);
setval(val);
};
const left = (
<div style={
{
fontSize: 16 }}>
<Space style={
{
"--gap": "16px" }}>
<p>昵称:{
state.name}</p>
</Space>
</div>
);
// 提交事件
function useVerifyPhoneNum() {
let list = {
id: nanoid(),
value: wish,
color: wishstyle,
x: 0,
y: 0,
};
wishlist.push(list);
localStorage.setItem("xinyuan", JSON.stringify(wishlist));
console.log(`wishlist`, wishlist);
setList([...wishlist]);
setWish("");
setStyle("");
}
// 删除事件
function usedelete(val) {
console.log(`123`, 123);
// wishlist.splice(val, 1);
wishlist.forEach(function (value, key) {
if (value.id == val) {
console.log("id", value.id);
console.log("val", val);
wishlist.splice(key, 1);
console.log(`key`, key);
localStorage.setItem("xinyuan", JSON.stringify(wishlist));
setList([...wishlist]);
}
});
console.log(`wishlist`, wishlist);
}
// 修改事件
function upValue(val) {
console.log(`val`, val);
}
useEffect(() => {
console.log(`数据`, 1);
if (localStorage.getItem("xinyuan") != null) {
let data = JSON.parse(localStorage.getItem("xinyuan"));
setList(data);
}
}, []);
useEffect(() => {
// wishlist=data;
console.log(wish);
console.log(wishstyle);
if ((wish.length > 0) & (wishstyle.length > 0)) {
setDisabled(false);
} else {
setDisabled(true);
}
}, [wish, wishstyle]);
return (
<div>
<NavBar left={
left} backArrow={
false}>
许愿墙
</NavBar>
<AutoCenter>
<Input
placeholder="请输入想实现的愿望"
value={
wish}
onChange={
(val) => {
setWish(val);
}}
clearable
/>
<div className="but">
<img className={
wishstyle == img1 ? 'oncli' : ''} src={
img1} onClick={
() => {
setStyle(img1)
}} />
<img className={
wishstyle == img2 ? 'oncli' : ''} src={
img2} onClick={
() => {
setStyle(img2)
}} />
<img className={
wishstyle == img3 ? 'oncli' : ''} src={
img3} onClick={
() => {
setStyle(img3)
}} />
<img className={
wishstyle == img4 ? 'oncli' : ''} src={
img4} onClick={
() => {
setStyle(img4)
}} />
<img className={
wishstyle == img5 ? 'oncli' : ''} src={
img5} onClick={
() => {
setStyle(img5)
}} />
</div>
<Button
onClick={
useVerifyPhoneNum}
disabled={
disabled}
block
type="submit"
color="primary"
size="large"
>
提交
</Button>
</AutoCenter>
{
/* 拖拽 */}
<div className="list">
{
wishlist?.map((item, index) => {
// console.log(`item`, item);
return (
<Draggable
key={
item.id}
handle=".box"
defaultPosition={
{
x: item.x, y: item.y }}
onStop={
eventLogger}
onStart={
(val) => {
TextDecoder(item.id);
}}
>
<div>
<button
className="butto"
onClick={
(val) => {
usedelete(item.id);
}}
>
x
</button>
<div className="inpt">
<p>{
item.value}</p>
</div>
<div className="box" style={
{
backgroundColor: item.color }}>
<img src={
item.color} />
</div>
</div>
</Draggable>
);
})}
</div>
</div>
);
}
然后就是样式代码阶段
.adm-auto-center {
margin: 10%;
}
.but {
margin: 20px 0;
border-radius: 25px;
}
.adm-auto-center {
margin: 5%;
}
.but img {
display: inline-block !important;
width: 60px;
height: 60px;
margin: 3px;
}
.oncli {
border-style: solid;
border-width: 2px;
border-color: red;
}
.box {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
z-index: 0;
}
.box img {
width: 100px;
height: 100px;
}
.butto {
position: relative;
top: 59px;
left: 77px;
}
.react-draggable {
width: 110px !important;
height: 100px;
position: absolute;
top: 400px;
left: 0;
}
.list {
flex-wrap: wrap;
width: 100%;
}
.inpt {
text-align: center;
margin: auto;
position: relative;
top: 65px;
input {
text-align: center;
width: 30px;
z-index: 100;
font-size: 22px;
}
p {
text-align: center;
color: white;
}
}