Динамическое добавление изображений и данных с помощью Ant-дизайна и ReactJS

#reactjs #react-hooks #antd

Вопрос:

Я не могу добавить изображение во время выполнения. При добавлении изображения изображение не отображается, я использую динамическую форму с теми же входными данными при добавлении формы, которая позже будет сохранена путем зацикливания, но у меня возникают проблемы при добавлении изображений. Я использую плагин от ant design.

Вот код.

 import React,{useState} from 'react' import { Button,Form,Input } from 'antd'; import {   PlusOutlined,  MinusCircleOutlined, } from '@ant-design/icons';  function Ad_abhb() {  const [Img1,setImg] = useState([]);   const i = 0;  const AddImg4 = (i) =gt;{  const [imgPrev1,setImgPrev1] = useState('');   const ImgC1=(e)=gt;{  const reader = new FileReader();  const vImg = e.target.files[0];  setImgPrev1(URL.createObjectURL(vImg));   reader.readAsDataURL(vImg);  reader.onload = () =gt; {[...setImg(reader.result)]}  }  return(lt;gt;  lt;Form.Item className='imgHobi'gt;  lt;Input id={'uImg4' i.kd} type="file" accept=".jpg,.jpeg,.png" onChange={ImgC1} hidden /gt;  lt;label htmlFor={'uImg4' i.kd}gt;  {imgPrev1.length gt;= 1 ?lt;gt;  lt;div className='imgLoad'gt;   lt;img src={imgPrev1} className='getImg' alt=''/gt;   lt;/divgt;  lt;/gt;:lt;gt;  lt;div className='imgLoad'gt;   lt;div className='UpImg'gt;  lt;div className='UpCore'gt;  lt;PlusOutlined style={{fontSize:'20px'}}/gt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;/gt;}  lt;/labelgt;  lt;/Form.Itemgt;  lt;/gt;)  }  const SimpanA4=()=gt;{  console.log(Img1)  }  return (lt;gt;  lt;h1gt;hobilt;/h1gt;  lt;div className='konten'gt;  lt;Form gt;  lt;Form.List name='Hobi'gt;  {(fields, { add, remove }) =gt; (lt;gt;  {fields.map((field,i)=gt;{  return(  lt;div key={field.key} className='cardAdminMod hobiList' gt;   lt;AddImg4 kd={i}/gt;  lt;Form.Item className='inputHobi' name="Hobi" {...field}gt;  lt;Input /gt;  lt;/Form.Itemgt;  {fields.length gt; 1 ? lt;div className='rmHobi'gt;lt;MinusCircleOutlined onClick={() =gt; remove(field.name)} /gt;lt;/divgt;: null}  lt;/divgt;)  })}  lt;Form.Item className='addPlusHobi'gt;  lt;Button type="dashed" onClick={() =gt; add()} block icon={lt;PlusOutlined /gt;}gt;  Add Data  lt;/Buttongt;  lt;/Form.Itemgt;  lt;/gt;)}  lt;/Form.Listgt;  lt;/Formgt;  lt;/divgt;  lt;div className="titleAdmin butSide"gt;   lt;Button onClick={SimpanA4}gt;Savelt;/Buttongt;   lt;/divgt;  lt;/gt;) }  export default Ad_abhb;  

Итак, кто-нибудь может мне помочь?

Комментарии:

1. Пожалуйста, проясните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы выделить именно то, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.