Erreur lors de la sélection d'une date à l'aide d'un sélecteur de date

Question

Il y a un problème avec un composant React. Peut-être que quelqu'un sait ce qui ne va pas ici. J'utilise la bibliothèque react-datepicker dans mon projet pour remplir la date côté client. Toutes les entrées du formulaire fonctionnent, mais une erreur se produit lorsque j'essaie de sélectionner une date dans le menu déroulant du calendrier.

Je ne connais pas react, et il se peut qu'il y ait une erreur dans la façon de travailler avec les états. Je serais reconnaissant pour toute aide !

Voici la liste :

import React, { Component } from 'react';
import axios from 'axios';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class Transfer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [],
      loading: true,
      error: false,
      startDate: new Date()
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }
  handleSubmit(e) {
    e.preventDefault();

    const data = {
      name: this.state.name,
      email: this.state.email,
      phone: this.state.phone,
      people: this.state.people,
      date: this.state.date,
      text: this.state.text
    };

    axios.post('http://localhost:5555/email/transfer', { data })
      .then(res => {
        console.log(data);
      })
  }
  render() {
    return (
      <div className="wrapper">

        <h5> </h5>

        <form action="" onSubmit={this.handleSubmit}>
          <div className="label-section"></div>
          <input name="name" id="name" type="text" defaultValue="" onChange={e => this.onChange(e)} /><br />
          <div className="label-section">Email</div>
          <input name="email" id="email" type="text" defaultValue="" onChange={e => this.onChange(e)} /><br />
          <div className="label-section"></div>
          <input name="phone" id="phone" type="text" defaultValue="" onChange={e => this.onChange(e)} /><br />
          <div className="label-section"> </div>
          <input name="people" id="people" type="number" min="1" max="11" defaultValue="" onChange={e => this.onChange(e)} />
          <div className="label-section"></div>
          <DatePicker
            id="date"
            name="date"
            defaultValue=""
            selected={this.state.startDate}
            onChange={e => this.onChange(e)}
          />
          <div className="label-section">  </div>
          <textarea name="text" id="text" type="text" cols={30} rows={10} defaultValue="" onChange={e => this.onChange(e)} /><br /><br />

          <button type="submit" className="xbutton"></button>
        </form>
      </div>
    );
  }
}

export default Transfer;

Merci de votre aide !)

Answer 1

OK, j'ai changé quelque chose et ça a marché. Je ne suis pas sûr d'avoir fait mieux, mais ça marche.

Je déclare une autre fonction :

onChangeDate(date) {
  console.log(date.toISOString());
  this.setState({ startDate: date })
}

Et l'utiliser pour le composant Datepicker :

<DatePicker
  id="date"
  name="date"
  defaultValue=""
  selected={this.state.startDate}
  onChange={date => this.onChangeDate(date)}
/>

Et ici, dans le tableau :

const data = {
  name: this.state.name,
  email: this.state.email,
  phone: this.state.phone,
  people: this.state.people,
  date: this.state.startDate,
  text: this.state.text
};

Answer 2

React-datepicker ne déclenche pas le même type d'événement qu'un champ de saisie classique

La fonction react-datepicker onChange renvoie une seule valeur : la date sélectionnée.

La fonction onChange d'une entrée html renvoie un événement de changement