글쓰기 기능 구현1

import React, { useState } from "react";

useState를 사용할거니 import먼저 해준다.

AddPost.js

이제 함수를 만들어준다.

AddPost.js

근데 이렇게 만드는게 맞는지 잘모르겠다😅

AddPost.js

onChange와 value를 추가해주었다.

일단 콘솔에 뜨긴하는데 이게 맞는걸까😅

정말이지 난 이길이 맞는걸까😅

 

ㅎr지만 포ㄱI란 없ㄷr.. 일단 ㅎH본ㄷr......

 

falaner.tistory.com/59

[react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ② 입력 기능 구현

위의 블로그를 참고하여 훨씬 더 깔끔하게 바꿔보았다!

import React, { useState } from "react";
import styled from "styled-components";
import {useSelector, useDispatch} from "react-redux";
import { Input } from "@material-ui/core";

const AddPost = (props) => {
    const {history} = props;

    // 포스트 추가 기능
    const [content, setContent] = useState({
        title: '',
        author: '',
        comment: ''
    })


    // 함수 생성
    const getValue = e => {
        const { name, value } = e.target;
        setContent({
            ...content,
            [name]:value
        })
        console.log(content);
    };

    return (
        <React.Fragment>
                <InputBox
                    onChange={getValue}
                    name="title"
                    placeholder="제목을 입력하세요"
                />
                <InputBox
                    onChange = {getValue}
                    name="author"
                    placeholder="작성자를 입력하세요"
                />
            <Contents
                onChange = {getValue}
                name="comment"
                placeholder="내용을 입력하세요"
            />
            <button>글쓰기</button>
        </React.Fragment>
    )
}

const InputBox = styled.input`
    display: block;
    margin: 20px auto;
    width: 500px;
    max-width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
`;

const Contents = styled.input`
    display: block;
    margin: 20px auto;
    width: 500px;
    max-width: 100%;
    height: 150px;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
`;

export default AddPost;