인프런 커뮤니티 질문&답변

담담님의 프로필 이미지
담담

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

게시글, 댓글 saga 작성하기

PostForm.js 에 Post 내용(text)가 빈값이 나와요.

작성

·

254

0

import React, { useCallback, useState, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Form, Input, Button } from 'antd';
import { addPost } from '../reducers/post';

const PostForm = () => {
  const { imagePaths } = useSelector((state) => state.post);
  const dispatch = useDispatch();
  const imageInput = useRef();
  const [text, setText] = useState('');
  
  const onChangeText = useCallback((e) => {
    setText(e.target.value);
  }, []);
  
  const onSubmit = useCallback(() => {
    console.log('여기가 빈값 이에요.', text); // 여기가 빈값 이에요.
    dispatch(addPost(text));
  }, []);

  const onClickImageUpload = useCallback(() => {
    imageInput.current.click();
  }, [imageInput.current]);
  return (
    <Form style={{ margin: '10px 0 20px'}} encType="multipart/form-data" onFinish={onSubmit}>
      <Input.TextArea
        value={text}
        onChange={onChangeText}
        maxLength={140}
        placeholder="어떤 신기한 일이 있었나요?"
      />
      <div>
        <input type="file" multiple hidden ref={imageInput} />
        <Button onClick={onClickImageUpload}>이미지 업로드</Button>
        <Button type="primary" style={{float: 'right'}} htmlType="submit">짹짹</Button>
      </div>
      <div>
        {imagePaths.map((v) => (
          <div key={v} style={{ display: 'inline-block'}}>
            <img src={v} style={{width: '200px'}} alt={v} />
            <div>
              <Button>제거</Button>
            </div>
          </div>
        ))}
      </div>

    </Form>
  )
}

export default PostForm;

답변 3

0

담담님의 프로필 이미지
담담
질문자

넵. 감사합니다.^^;;

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

onSubmit useCallback 빈 배열에 text를 넣으세요.

0

담담님의 프로필 이미지
담담
질문자

게시글 등록 하고 있는데요. 텍스트를 입력하고 짹쨱 버튼을 클릭하면 텍스트가 넘어가지 않아요. 텍스트 변수값이 '' 빈값이에요 버그를 못찾겠어요 ㅠ_ㅠ.

담담님의 프로필 이미지
담담

작성한 질문수

질문하기