React

 

saveForm.js

import { useState } from 'react';
import { Container, Form, Button } from "react-bootstrap";
import { useNavigate } from 'react-router-dom';

const SaveForm = (props) => {
    let navigate = useNavigate();

    const [book, setBook] = useState({
        title: "",
        author: ""
    });

    const changeValue = (e) => {
        setBook({
            ...book,
            [e.target.name]: e.target.value
        });
    }

    const submitBook = (e) => {
        e.preventDefault(); //submit이 action을 안타고 자기할일을 그만함.
        fetch("http://localhost:8080/book", {
            method: 'POST',
            //mode: "cors",
            headers: {
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify(book)
        })
            .then((res) => {
                console.log(1, res);
                return res.json();
            })
            .then(res => {
                console.log(2, res);
                if (res != null) {
                    //props.history.push("/");
                    navigate("/");
                } else {
                    alert("책 등록에 실패하였습니다.");
                }
            }).catch(error => {
                console.log("실패", error);
            })
    }


    return (
        <Container>
            <Form onSubmit={submitBook}>
                <Form.Group className="mb-3" controlId="formBasicEmail">
                    <Form.Label>제목</Form.Label>
                    <Form.Control type="text" placeholder="Enter Title" onChange={changeValue} name="title" />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicEmail">
                    <Form.Label>작성자</Form.Label>
                    <Form.Control type="text" placeholder="Enter Author" onChange={changeValue} name="author" />
                </Form.Group>

                <Button variant="primary" type="submit">
                    글쓰기
                </Button>
            </Form>
        </Container>
    );
};

export default SaveForm;

 

 

 

 

 

 

https://github.com/braverokmc79/React-SpringBoot-1/commit/4971b024df8a0bcbec730ec341c4df2d08933c49

 

 

 

about author

PHRASE

Level 60  라이트

처세술이란 것은 무엇보다도 자기가 한 결심을 재치 있게 해내는 일이다. 그러므로 자기가 하고 있는 일에 대해서 군소리를 하지 않는 사람이야말로 처세술이 능한 사람이라 할 것이다. -알랭

댓글 ( 4)

댓글 남기기

작성

React 목록    more