[React] input 데이터 수정 - 떽떽대는 개발공부

2021/01/19 - [React] - [React] react, redux 를 사용하여 게시판 만들기 - 떽떽대는 개발공부

[React] react, redux 를 사용하여 게시판 만들기 - 떽떽대는 개발공부

이전 글에서 게시판을 만들어 보았으나 게시판 구현 중 글 작성 부분에 미흡한 부분이 있었다.

input 값이 변동될 때마다 prop 으로 받는 inputData를 바꿔주기 위해 밖으로 데이터를 뺐기 때문..

그 부분은 아래와 같이 수정하여 해결하였다.

 

 

 

 

src/container/BoardNew.js

import React, { useState } from 'react';

function BoardNew(props) {
    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')
    const { onSave, changeInput, inputData, resetForm } = props

    const saveBtnClick = (e) => {
        console.log(e);
        e.preventDefault();
        const _inputData = {
            boardId: '',
            boardTitle: title,
            boardContent: content
        }

        onSave(_inputData);
        resetForm();
    }

    const handleTitle = (e) => {
        setTitle(e.target.value)
    }

    const handleContnet = (e) => {
        setContent(e.target.value)
    }

    return (
        <>
            <div width="50">
                <form onSubmit={saveBtnClick}>
                    <div>
                        제목 : <input type="text" name="boardTitle" onChange={handleTitle} value={title} />
                    </div>
                    <div>
                        내용 : <input type="text" name="boardContent"  onChange={handleContnet} value={content} />
                    </div>
                    <input type="hidden" name="boardId" onChange={changeInput} value={inputData.boardId} />
                    <button type="submit" >신규 게시글 저장</button>
                </form>
            </div>
        </>
    )
};

export default BoardNew;