javascript - 在单个 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

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

来自: 名称=“开始日期” 到 名称=“开始日期”

另外，这里: 名称=“结束日期” 到 名称=“结束日期”