Question

//设置新日期

this.state.startDate = new Date("July 27, 1962 23:30:00")
const date = new Date(this.state.startDate);

//设置小时数

date.setHours(0, 0, this.state.second);
date.toTimeString();

当我单击edit时。我希望此日期显示在输入中。而且可以编辑

图片：https://imgur.com/OjBEC5u

此处的示例：https://stackblitz.com/edit/react-cuubsx

修改

class Edit extends React.Component {
  render() {
    return (
        <DatePicker
          selected={this.props.startDate}
          onChange={this.props.handleChange}
        />
    )
  }
}

项目

class Item extends Component {

  state = {
    startDate: new Date("July 27, 1962 23:30:00"),
    second: 120
  }

  handleChange = (date) => {
    this.setState({
      startDate: date
    });
  }


  render() {

    const date = new Date(this.state.startDate);
    console.log(date)
    date.setHours(0, 0, this.state.second);
    date.toTimeString();

    return (
         <Edit
            handleChange={this.handleChange}
            startDate={date}
            handleDescription={this.handleDescription}
            date = {this.date} 
          />

    )
  }
}

Answer 1

我想我发现了你的错误。

index.js第29行：

<DatePicker
          selected={this.props.date}
          onChange={this.props.handleChange}
          showTimeSelect
          customInput={<CustomInput />}
          timeFormat="HH:mm"
          value={this.props.startDate}
          dateFormat="yy-MM-dd, hh:mm"
          timeCaption="time"
        />

value应该是selected

修正：https://stackblitz.com/edit/react-p7czys

有关参考，请参见文档：https://reactdatepicker.com/#example-43

Answer 2

您的代码有2个问题。使用customInput时，您未指定 onChange处理程序，因此选择日期不会更新任何内容。因此，添加一个onChange处理程序：

<input onClick={this.props.onClick} onChange={this.props.onChange}
className="dateInput" value={this.props.value} type="text" />

您将this.date作为对EditForm的支持，而应该改为date。由于this.date未定义，因此您输入的日期始终为空。

<EditForm
    handleChange={this.handleChange}
    description={this.state.description}
    startDate={date}
    handleDescription={this.handleDescription}
    onSave={this.onSave}
    onCancel={this.onCancel}
    date={date}
/>

结果在此stackblitz中。

Answer 3

您的代码中存在一些问题

在Todo组件中，您传递的是date={this.date}，这是错误的。 this.date是undefined。您可能打算只通过date。即date={date}。
您正在修改父组件渲染函数中的时间，每次在输入上进行更改时都会执行该时间。因此，将其删除或将其移至render方法之外的其他地方

   date.setHours(0, 0, this.state.second);

这里的工作示例https://stackblitz.com/edit/react-qnlbq9?embed=1&file=index.js

因此，基本上，您正在通过两个不同的道具-startDate和date传递相同的值。

Answer 4

很幸运，我之前写过它，并在我的旧项目中找到了它。

DateInput.jsx

import React, { Component } from "react";
import DatePicker from "react-datepicker";

class DateInput extends Component {
    setDate = date => {
        this.props.onChange(this.props.name, date);
    };

    render() {
       const { name, value } = this.props;
       return (
           <DatePicker
           id={name}
           name={name}
           selected={value}
           onChange={this.setDate}
         />
       );
    }
}

export default DateInput;

App.js （如何使用）

import React, { Component } from "react";
import DateInput from './DateInput';

class App extends Component {
  state = {
    data : {
       dateToday : new Date()
       //other properties
    }
  }
  handleDate = (name, date) => {
      const data = this.state.data;
      data[name] = date;
      this.setState({ data });
    };

  render() {
    const {data} = this.state;
    return (
       <DateInput
       name="dateToday"
       value={data.dateToday}
       onChange={this.handleDate}
       />
    );
  }
}

重要：name是变量的string（键），value是变量的new Date()（值）。

请参见演示here on CodeSandBox

编辑时DatePicker不显示输入中的日期

4 个答案: