Как я могу выполнить запрос ax ios -delete-multible с выбранными строками в таблице на reactJS? - PullRequest
Новая
       7

Как я могу выполнить запрос ax ios -delete-multible с выбранными строками в таблице на reactJS?

0 голосов
/ 24 апреля 2020

У меня есть таблица клиентов. Каждая строка (клиент) имеет флажок. Я хочу выбрать нескольких клиентов, а затем нажать кнопку удаления. Но я не знаю, как получить все идентификаторы одновременно. У меня также была идея добавить поле «нажал» в this.state.customers и после нажатия кнопки проверить, какие из них активны. Или сохранить выбранные в другом объекте.

Что мне делать?

И можно ли просто выполнить запрос на удаление и снова извлечь данные из базы данных? Потому что это не похоже на реакцию. Я не понимаю, почему я должен работать с объектом this.state, когда я хочу выполнить запрос. Это приведет к двум различным состояниям данных, одному в this.state и одному в самой базе данных, если я не выполню refre sh -requests. 

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

import CustomerNew from './CustomerNew'
import {API_fetchCustomers} from './CustomerApiCalls'
import {API_deleteCustomers} from './CustomerApiCalls'


class CustomerList extends Component{
    constructor(props){
        super(props);
        this.state = {
            customers: []
        };
    }
    fetchCustomers(){
        API_fetchCustomers().then(customers=>{
            this.setState({ customers });
        }).catch(error => {
            console.log(error);
        })
    }
    handleDeleteRequest(){
        const {customers} = this.state;
        console.log(customers.find(
            function (customer) {
                return customer.isChecked = true;
            }
        ))
        return;
        API_deleteCustomers().then(customers=>{
            this.setState({ customers });
        }).catch(error => {
            console.log(error);
        })
    }
    componentDidMount() {
        this.fetchCustomers();
    }

    handleCheckChieldElement(event) {

        console.log(event.target.value);

    }

    render(){
        const {customers} = this.state;
        return (
            <div>
            <div className="m-4">
                <div className=" float-right  mb-3">
                    <button className='btn btn-danger m-3' onClick={() => this.handleDeleteRequest}>Kunden löschen</button>
                    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
                        Kunden erstellen
                    </button>
                </div>
                <div className="modal fade" id="exampleModalLong" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                    <div className="modal-dialog" role="document">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title" id="exampleModalLongTitle">Kunden erstellen</h5>
                                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div className="modal-body">
                                <CustomerNew reloadCustomerList={()=> this.fetchCustomers()}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table className="table">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Unternehmen</th>
                        <th scope="col">Uid</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                 <tbody>
                    {customers.map((cust, index) =>
                        <tr key={index}>
                            <th>
                                <div >


                                    <input className="mr-1" value={cust.id} onClick={this.handleCheckChieldElement} type="checkbox"  />
                                    {cust.id}
                                </div>
                            </th>
                            <td>{cust.Name} {cust.Lastname}</td>
                            <td>{cust.Company}</td>
                            <td>{cust.Uid}</td>
                            <td>{cust.Email}</td>
                        </tr>
                     )}
                 </tbody>
            </table>
            </div>

        );
    }

}

export default CustomerList;
...