使用日期选择器选择日期时出错答案

【问题标题】：Error when I select date using datepicker使用日期选择器选择日期时出错
【发布时间】：2023-04-09 21:28:01
【问题描述】：

React 组件有问题。也许有人知道，这里有什么问题。我在我的项目中使用 react-datepicker 库来填充客户端的日期输入。所有表单输入都有效，但是当我尝试在日历下拉菜单中选择日期时出现错误。

我是新来的反应，也许在与各州合作时存在某种错误。如果有任何帮助，我将不胜感激！

这里是列表：

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;

感谢您的帮助！）

【问题讨论】：

哪个错误？你能说得更清楚些吗？
消息指向这个：this.setState({ [e.target.name]: e.target.value }) 和这个地方：onChange={e => this.onChange(e)}

标签： reactjs datepicker

【解决方案1】：

React-datepicker 不会触发与常规输入字段相同的事件

react-datepicker onChange 函数返回一个值 - 选择的日期。

html 输入 onChange 函数返回 change event

【讨论】：

【解决方案2】：

好的，我改变了一些东西，它起作用了。不确定我是否以更好的方式做到了，但它确实有效。

我声明另一个函数：

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

并将其用于 Datepicker 组件：

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

这里，在数组中：

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
};

【讨论】：