Блог

Я пытаюсь сослаться на входной файлфайл /> элемент к другому хорошо оформленному элементу, и даже после поиска в Google я не нашел ответа, поэтому я здесь со всей надеждой получить ответ.

Это часть моей формы, контролируемой redux, и крючка для использования:

   const fileInput = useRef(null);

    <Form model="testimonial" onSubmit={(value) => handleSubmit(value)}>                            
     <div id="preview-upload" className="form-group">
                                       
        <span onClick={() => {console.log(fileInput.current); fileInput.current.click()}} ></span>
                                        
        <Control.file ref={fileInput} onChange={(e) => handleImgPreview(e)} model=".photo" name="photo" id="photo" /> 
      </div>
    </Form>   
 

Это функция, которая будет выполняться при обмене

 const handleImgPreview = (event) =>{
    console.log(event)
    event.preventDefault();
    let reader = new FileReader();
    let file = event.target.files[0];

    reader.onloadend = () => {
        setImgPrev({...imgPrev, file: file, imgUrl: reader.result})
    }

    reader.readAsDataURL(file)
};
 

когда буду менять на обычные HTML ввода, как <input type=»file» …….=»» /> это работает, но, конечно, у меня есть проблема, когда я отправить форму, и когда я изменить его на файл />> Я получил сообщение об ошибке, в котором говорится: Ошибка типа: fileInput.current.click не является функцией, когда я нажимаю на элемент span.

Я пытался

<span onClick={() => fileInput.current.props.onChange()}} /<span onClick={() =>>

затем событие стало неопределенным:

Ошибка типа: Не удается прочитать свойство ‘preventDefault’ неопределенного

console.log(событие) // не определено

Вместо

ссылка={Ввод файла}

использовать

GetRef={(ввод) => Файловый ввод = ввод}

и обратите внимание, что функция GetRef prop принимает функцию, которая вызывает обратный вызов, предоставленный ей экземпляром узла.

Теперь, если вы введете файл в консоль, вы получите функцию обратного вызова внутри GetRef, поэтому вам не нужно будет обращаться к .current, просто вызовите метод click() после iputFile, как показано ниже:

 <span onClick={() => {console.log(fileInput); fileInput.click()}}></span>
    
<Control.file getRef={(input) => fileInput = input} onChange={(e) => handleImgPreview(e)} model=".photo" name="photo" id="photo" />