#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. Пожалуйста, проясните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы выделить именно то, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.