кнопка удаления в REACTJS, как я могу отправить значение через AX IOS? - PullRequest
Новая
       24

кнопка удаления в REACTJS, как я могу отправить значение через AX IOS?

1 голос
/ 21 апреля 2020

Я бы хотел, чтобы переменная "id" содержала идентификатор книги, чтобы отправить его обратно через топор ios. это таблица, содержащая несколько книг с кнопкой удаления в каждой строке, поэтому «id» должен содержать идентификатор книги соответствующей строки. если кто-нибудь может мне помочь, пожалуйста? (Также, если кто-то может помочь мне, как я могу редактировать данные каждой книги, чтобы отправить их также через Ax ios?) 

import React from 'react';
import { MDBTable, MDBTableBody, MDBTableHead, MDBCol, MDBBtn } from 'mdbreact';
import './mesLivres.css';
import axios from 'axios';

class MyBooks extends React.Component {

state = {
  loading: true,
  books: null,
  id: '',
  error: '',
};

change = async e => {
  await this.setState({
    id : e.target.value,
  });
}

handleSubmit = e => {

  console.log(this.state);
  let formData = new FormData();
  formData.append("title",this.state.id);
  const url = "http://localhost:8888/API/affichage/supprimer.php"
  axios.post(url, formData)

  .then(function(response){
    console.log(response);
    alert('book has been deleted');
  })

  .catch((error)=>{
    if (error.response.status === 403){
      console.log(error);
      alert('no deleted');
    }
  });

  setTimeout(() => {
    this.setState({
      error: '',
    });
  }, 2000);

  e.preventDefault();
}


async componentDidMount() {
  const url = "http://localhost:8888/liste_livres/liste.php";
  const response = await fetch(url);
  const data = await response.json();
  this.setState({books: data.results.livres, loading: false})
  console.log(data.results.livres);
}


render() {
  if(this.state.loading){
    return <div>chargement...</div>;
  }

  if (!this.state.books){
    return (
      <div>
        <h1 className="myBibli"> Mes livres </h1>
        <div className="noBook">
          Vous n'avez actuellement aucun livre dans votre bibliothèque.
        </div>
      </div>  
    );
  }

  return (
    <div>
      <h1 className="myBibli"> Mes livres </h1>
      <br></br>
      <h2> Vous avez {this.state.books.length} livres dans votre bibliothèque:</h2>
      <br></br>
      <MDBTable hover>
        <MDBTableHead>
          <tr>
            <th>Titre</th>
            <th>Auteur</th>
            <th>Année de sortie</th>
            <th>Edition</th>
            <th>Type</th>
            <th>Statut</th>
            <th>Date d'achat</th>
            <th></th>
            <th></th>
          </tr>
        </MDBTableHead>
        <MDBTableBody>
          {
            this.state.books.map(livre => (
              <tr key={livre.id} onChange={this.Change} >
                <td>{livre.title} </td>
                <td>{livre.author}</td>
                <td>{livre.year}</td>
                <td>{livre.edition}</td>
                <td>{livre.typeBook}</td>
                <td>{livre.status}</td>
                <td>{livre.date}</td>
                <td><MDBBtn color="dark">Modifier</MDBBtn></td>
                <td><MDBBtn type="submit" onClick={this.handleSubmit} color="dark">Supprimer</MDBBtn></td>
              </tr>
            ))
          }
        </MDBTableBody>
      </MDBTable>

    </div>
  );
}
}

export default MyBooks;
...