如何在反应中基于表单添加图像

Question

所以基本上我正在做一个有关从api获取数据并呈现它的项目。

到目前为止，我已经做到了：

所以我在这里所做的是，我从该网站https://jsonplaceholder.typicode.com/获得了数据 使用api，我将它们存储在useState中，并映射到它们上并根据缩略图和其下方的文本发布了图像。我现在想要的是在添加url，缩略图url和文本时能够在帖子中添加任何图像。

我考虑过像表单那样做，但是不知道如何将输入字段中的数据带到将要创建的div中，我当然可以用其他方式来做，但实际上我被卡在这里了，不知道该怎么办：

到目前为止，我的代码：

import React,{useState,useEffect} from 'react';
import axios from 'axios';


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));
      };

    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>
            <div>
                <form method="post" id="form1">
                    <input type="url" placeholder="url"></input>
                    <input type="url" placeholder="thumbnail url"></input>
                    <input type="text" placeholder="text"></input>
                </form>
                <button type="submit" form="form1" value="Submit">submit</button>
            </div>

        </div>

    )
}

export default Data;