카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

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

20.11.15 10:16 작성 조회수 190

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;