-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
useRef의 click 펑션에서 에러 질문입니다
20.05.22 00:54 작성 조회수 960
0
다음과 같이 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) => {<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:813px;text-align:left;background:#ffffff;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
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.TextArea>
</Form.Item>
<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" }}
></img>
</div>
);
})}
</div>
<Button onClick={onClickImageUpload}>Upload Image</Button>
<Button
htmlType="submit"
type="primary"
style={{ float: "right" }}
loading={isAddingPost}
>
Submit
</Button>
</Form>
</React.Fragment>
);
};
export default PostForm;
답변을 작성해보세요.
0
0
stefan CHO
질문자2020.05.22
하... 죄송합니다..
제가 Component를 Ant design꺼를 모르고 썼네요..
Input 을 일반 input 태그로 바꾸닌깐 제대로 작동하네요
결국 이번에도 오타였군요 ㅠ
답변 2