所以我从api获得数据并映射到它们上以呈现这些图像:
所以我正在尝试执行此项目,现在我基本上陷入了困境,我的反应和CSS不太好,但是我正在学习,现在我想做的就是添加删除功能。我创建了一个函数,当我单击图像时,该函数会从数据中删除图片,但是我想要的是,当我将鼠标悬停在图像上时,会出现一个红叉,当我按下该红叉时,我可以触发该函数并删除图像
代码:
import React,{useState,useEffect,useReducer} from 'react';
import axios from 'axios';
import {useForm} from 'react-hook-form';
const Data = () => {
const [photo,setPhoto] = useState([])
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/photos").then(
result => {
setPhoto(result.data)
}
)
},[])
const [Url,setUrl] = useState()
const[photoId,setPhotoId] = useState()
const showPicture = (url,id) => {
setUrl(url)
setPhotoId(id)
}
const handleDelete = id => {
setUrl(null);
setPhoto(prevState => prevState.filter(x => x.id !== id));
};
const {register,handleSubmit,errors} = useForm();
const [links,setLinks] = useState({
link:'',
thumbnailLink:'',
title:''
})
const onSubmit = (data) => {
console.log(data)
};
return(
<div>
<div><img src={Url} onClick={() => handleDelete(photoId)}></img></div>
<div>Posts</div>
{/* <p>enter album Id to see the magic</p><input type="text" value={albumId} onChange={e => setAlbumId(e.target.value)}></input>
<button type="button" onClick={handleClick}>Fetch Album</button> */}
<div className="container">
<div>{photo.slice(0,3).map(p =>
<div key={p.id}>
<img src={p.thumbnailUrl} thumbnailUrl={p.thumbnailUrl} onClick={() => showPicture(p.url,p.id)}></img>
<div>{p.title}</div>
</div>
)}</div>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<input type="url" placeholder="link" name="link" ref={register}/>
<input type="url" placeholder="thumbnail url" name="thumbnail" ref={register}/>
<input type="text" placeholder="title" name="title" ref={register}/>
<input type="submit" />
</form>
</div>
)
}
export default Data;
您需要做的就是在删除按钮上添加一个类名,默认情况下,将其css设置为display: none
,并将其悬停属性设置为display: unset
,它应该像魔术一样工作。
我试图将其应用于您的代码。
我刚用x添加了div并使用了箭头功能,所以我可以传递照片的ID:
<div className='container-delete' onClick={e => this.handleDelete(p.id)}>X</div>
和css样式:
.container-delete {
display: none;
color: red;
}
.container-delete {
display: unset;
}
这里是完整的代码(只需在您的css文件中添加css以进行隐藏和显示):
import React,{useState,useEffect,useReducer} from 'react';
import axios from 'axios';
import {useForm} from 'react-hook-form';
const Data = () => {
const [photo,setPhoto] = useState([])
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/photos").then(
result => {
setPhoto(result.data)
}
)
},[])
const [Url,setUrl] = useState()
const[photoId,setPhotoId] = useState()
const showPicture = (url,id) => {
setUrl(url)
setPhotoId(id)
}
const handleDelete = id => {
setUrl(null);
setPhoto(prevState => prevState.filter(x => x.id !== id));
};
const {register,handleSubmit,errors} = useForm();
const [links,setLinks] = useState({
link:'',
thumbnailLink:'',
title:''
})
const onSubmit = (data) => {
console.log(data)
};
return(
<div>
<div><img src={Url} onClick={() => handleDelete(photoId)}></img></div>
<div>Posts</div>
{/* <p>enter album Id to see the magic</p><input type="text" value={albumId} onChange={e => setAlbumId(e.target.value)}></input>
<button type="button" onClick={handleClick}>Fetch Album</button> */}
<div className="container">
<div>{photo.slice(0,3).map(p =>
<div key={p.id}>
<img src={p.thumbnailUrl} thumbnailUrl={p.thumbnailUrl} onClick={() => showPicture(p.url,p.id)}></img>
<div>{p.title}</div>
<div className='container-delete' onClick={e => this.handleDelete(p.id)}>X</div>
</div>
)}</div>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<input type="url" placeholder="link" name="link" ref={register}/>
<input type="url" placeholder="thumbnail url" name="thumbnail" ref={register}/>
<input type="text" placeholder="title" name="title" ref={register}/>
<input type="submit" />
</form>
</div>
)
}
export default Data;
您可以检查此
{photo.slice(0, 3).map(p => (
<div key={p.id} onClick={() => deleteIt(p)}>
<img
alt="theme"
src={p.thumbnailUrl}
thumbnailUrl={p.thumbnailUrl}
onClick={() => showPicture(p.url, p.id)}
/>
<div>{p.title}</div>
</div>
))}
删除功能
const deleteIt = item => {
let filtered = photo.filter(p => p.id !== item.id);
setPhoto(filtered);
};