Как создать динамическую таблицу в JS реагировать с помощью MVC?

Question

Я использую реагирование для создания новых компонентов, и я хочу создавать динамические компоненты для каждого элемента управления, и я начинаю с таблиц, где я могу добавить параметры редактирования, удаления, добавления обновления.

Answer 1

You should bind the Method name in constructor Level Like this 

constructor(props) {
    super(props);
    this.state = {
        items: [],
        isLoaded: false,
    }

    this.doAction = this.doAction.bind(this);
    this.barrow =this.barrow.bind(this);
    this.CRUDService = new CRUDService();
}

Методы должны быть такими:

doAction(actionName,recordId) {
    if(actionName === 'delete'){
        this.CRUDService.delete('books',recordId).then((result) => {
            let responseJson = result;
            console.log(result)
            debugger;
            if(responseJson===1){
                this.loadDataTable();
            }
        });
    } else {
        this.props.history.push('/book/' + actionName + '/' + recordId);
    }
}

barrow(id,currcount,totalcount){
    if(currcount<1){
        window.ShowPopup('Book is not available');
    }else{

    }
}

Часть HTML-привязки должна быть такой:

 <table className="table">
                                    <thead>
                                    <tr>
                                        <th>IsbnNo</th>
                                        <th>Title</th>
                                        <th>Book Current Count</th>
                                        <th>Book Total Count</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {items.map((item, i) =>
                                        <tr key={i}>
                                            <td>{item.isbn_no}</td>
                                            <td>{item.title}</td>
                                            <td>{item.book_current_count}</td>
                                            <td>{item.book_total_count}</td>

                                            <td>
                                            <button type="button" className="btn btn-info btn-sm btn-space"
                                                        onClick={() => this.doAction('view',item.id)}>
                                                    View</button>

                                                <button type="button" className="btn btn-primary btn-sm btn-space"
                                                        onClick={() => this.doAction('edit',item.id)}>
                                                    Edit</button>
                                                <button type="button" className="btn btn-danger btn-sm btn-space"
                                                        onClick={() => this.doAction('delete',item.id)}>
                                                    Delete</button>
                                                    <button type="button" className="btn btn-secondary btn-sm btn-space"
                                                        onClick={() => this.barrow(item.id,item.book_current_count,item.book_total_count)} disabled>
                                                      Barrow   </button>

                                            </td>
                                        </tr>
                                    )}
                                </tbody>

                                </table>