Crud em 反应

Question

我正在研究 React 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

你可以从那里开始，剩下的自己找

Crud em 反应

Crud em reactjs

crud

reactjs