Crud em reactjs

Question

我正在研究反应js并且正在为书籍控制创建一个简单的库设计。我擅长学习的初期，并希望实施书籍的CRUD。

我完美地创建了布局和路线。当我导航到书籍路线时，我将创建一个列出书籍的代码。只有从这个视图/组件，我想创建一个我仍然不知道如何创建图书注册和更新视图的代码。但我想从图书清单屏幕上调用这些新屏幕。不想在单一视图中放置一切！我可以做。

以下是我正在为您做的更好理解的代码。

https://github.com/wagnergrilo85/library-react/blob/master/src/screens/book/Book.js

Answer 1

您的文件结构如下所示：

• Book.js（在这里你可以处理数据，从这个组件你可以管理所有较小的组件）

import React from 'react';
import BookList from './bookList';

class Book extends React.Component {
    
        constructor(){
            super()
            this.state = {
                books: [],
                book: {},
            }
        }
    
        componentDidMount(){
            // Here you will call API to get full list of book
            // this.setState(books: responseApi)
        }

        showBook(id){
            // Find the single book 
            // this.setState(book: responseApi)
        }

        updateBook(id, data){
            // Find the single book 
            // Get new data
            // Update API
        }

        deleteBook(id){
            // Find the single book
            // Delete book in API
        }
    
        render(){

    
            return(
                <div>
                    <BookList books={this.state.books} />
                </div>
            )
        }
}

• BookList.js（显示列表）

• BookShow.js（显示单本书信息）

• BookUpdate.js

• BookCreate.js

  • BookForm.js

你可以从那里开始，自己找到其余的