在单个 onChange 上设置日期选择器的值

Question

我正在尝试为两种不同的输入类型设置日期。我尝试为两个输入事件处理程序调用不同的函数，它起作用了。但我想用更简洁的方式来管理输入日期。我尝试调用单个 onChange() 的不同方法似乎没有改变我的输入框值。

这是我的代码：

import React, { Component } from "react";
import axios from "axios";

export default class DatePage extends Component {
  constructor() {
    super();
    this.state = {
      startDate: '',
      endDate: '',
      clicked: false
    };
  }

  componentDidMount() {

    this.setDate();



    this.setState({
        clicked: true
      });
  }

  setDate = (e) => {

    if (this.state.clicked !== true) 
    {
      var date = new Date();

      var newdate =
        date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)) + "-" + date.getDate();

      this.setState({
        startDate: newdate,
        endDate: newdate,
        clicked: false
      });
    } 

    else 
    {

        this.setState({
            [e.target.name]: e.target.value
        });
    }
  };

  render() {
    return (
      <div>

        <label>From</label>
        <input
          type="date"
          name="startdate"
          value={this.state.startDate}
          onChange={this.setDate}

        />

        <label>To</label>
        <input
          type="date"
          name="enddate"
          value={this.state.endDate}
          onChange={this.setDate}
        />
      </div>
    );
  }
}

默认情况下，我设置当前日期并更改所选日期

Answer 1

您需要更正表格中的姓名。

来自： name="startdate" 到 name="startDate"

此外，这里： name="enddate" 到 name="endDate"

Answer 2

看来情况不对。我清理了代码。

开始日期到开始日期结束日期到结束日期。改一下这部分好像还不错

import React, { Component } from "react";


export default class Datepage extends Component {
  constructor() {
    super();
    var date = new Date();
    var newdate =
      date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)) + "-" + date.getDate();

    this.state = {
      startdate: newdate,
      enddate: newdate,
      clicked: false
    };
  }

  componentDidMount() {
  }

  setDate = (e) => {    
      this.setState({
          [e.target.name]: e.target.value
      });    
  };

  render() {
    return (
      <div>

        <label>From</label>
        <input
          type="date"
          name="startdate"
          value={this.state.startdate}
          onChange={this.setDate.bind(this)}

        />

        <label>To</label>
        <input
          type="date"
          name="enddate"
          value={this.state.enddate}
          onChange={this.setDate.bind(this)}
        />
      </div>
    );
  }
}

在单个 onChange 上设置日期选择器的值

Setting value of Date Picker on single onChange

javascript

datetime

onchange

reactjs