useRef의 click 펑션에서 에러 질문입니다

Question

다음과 같이 useRef의 current.click()을 해주려는데, button을 눌렀을때 , TypeError가 발생합니다. 에러메세지는 이렇습니다... 그냥 바닐라 자바스크립트로, click이벤트 해보닌깐 문제없는데. function이 없다고 하는게 왜 그런지 이유를 잘 못찾겠습니다. 공식문서봐도 딱히 그런내용없고, current.focus()로 예문들이 있길래 해봣는데, text input에 그냥 focus하는거라 그런지 file input에는 안 먹히네요. 제로초님 코드랑 비교해봐도 왜 image.current.click()에서 에러가 나는지 모르겠습니다. 혹시 어떤걸 시도해보면 될까요? TypeError: imageInput.current.click is not a function (anonymous function) ./components/postform.js:27 24 | 25 | const onClickImageUpload = useCallback(() => { 26 | console . log(imageInput . current) ; > 27 | imageInput . current . click() ; | ^ 28 | } , [imageInput . current]) ; 29 | 30 | const onChangeImage = useCallback((e) => { View compiled import React, { useState, useCallback, useEffect, useRef } from " react " ; import { Form, Input, Button } from " antd " ; import { useSelector, useDispatch } from " react-redux " ; import { ADD_POST_REQUEST , UPLOAD_IMAGES_REQUEST } from " ../reducers/post " ; const PostForm = () => { const { imagePaths, isAddingPost, isAddedPost } = useSelector ( ( state ) => state . post ); const [text, setText] = useState ( "" ); const dispatch = useDispatch (); const imageInput = useRef (); const onChangeText = useCallback (( e ) => { setText ( e . target . value ); }, [] ); const onSubmitForm = useCallback (() => { if ( ! text || ! text . trim ()) { return alert ( " please write something " ); } dispatch ( { type : ADD_POST_REQUEST , data : { content : text . trim () } } ); }, [text] ); const onClickImageUpload = useCallback (() => { console . log (imageInput . current) ; imageInput . current . click () ; }, [imageInput . current] ); const onChangeImage = useCallback (( e ) => { console . log (e . target . files) ; const imageFormData = new FormData () ; [] . forEach . call (e . target . files, ( currentValue ) => { imageFormData . append (image, currentValue) ; }) ; dispatch ( { type : UPLOAD_IMAGES_REQUEST , data : imageFormData, } ); }, [] ); useEffect (() => { if (isAddedPost) { setText ( "" ); } }, [isAddedPost] ); return ( < React.Fragment > < Form encType = " multipart/form-data " onFinish = { onSubmitForm }> < Form.Item > < Input.TextArea maxLength = { 140 } placeholder = " What is your latest news? " value = { text } onChange = { onChangeText } > < Input type = " file " multiple ref = { imageInput } onChange = { onChangeImage } /> < div > { imagePaths . map ( ( x, i ) => { return ( < div key = { i } style = { { display : inline - block } }> < img src = { " localhost:/3065/ " + x } alt = { x } style = { { width : " 200px " } } > ) ; }) } < Button onClick = { onClickImageUpload }> Upload Image < Button htmlType = " submit " type = " primary " style = { { float : " right " } } loading = { isAddingPost } > Submit ) ; } ; export default PostForm ;

zerocho · Answer

antd같은 것은 ref를 쓰시려면 innerRef로 대체하시면 됩니다.

stefan CHO · Answer

하... 죄송합니다.. 제가 Component를 Ant design꺼를 모르고 썼네요.. Input 을 일반 input 태그로 바꾸닌깐 제대로 작동하네요 결국 이번에도 오타였군요 ㅠ