First we need to create a home folder in the project to store files, and then create the home.jsx and index.less formats in the file.
Then the next step is to directly enter the code
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>
);
}
Then comes the style code stage
.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;
}
}