时间戳

首页 > 解决方案 > 在反应中添加红十字删除功能

reactjs - 在反应中添加红十字删除功能

问题描述

所以我有来自 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;

标签： reactjsonhover

解决方案

You can call method when you are hovering an HTML Element with attribute onMouseEnter

Add this attribute in your component : 

<div key={p.id} onMouseEnter={() => displayRedLine(p.id)}>
  <img src={p.thumbnailUrl} thumbnailUrl={p.thumbnailUrl} onClick={() => showPicture(p.url,p.id)} onMouseen/>
  <p>{p.title}</p>
</div>

Create a new state to know if the photo is hovered :

const [photoHovered, setPhotoHovered] = useState(0) // It takes the id of hovered photo

displayRedLine(String id) method :

const displayRedLine = id => {
  setPhotoHovered(id); //It take the id of the photo when it was hovered

}

Finally, display a red line with a condition to know if it is hovered thanks to :
p.id === photoHovered ? /** make something **/

推荐阅读