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

默认情况下，我设置当前日期，然后onChange选择日期

Answer 1

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

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

另外，在这里： name="enddate" 至 name="endDate"

Answer 2

似乎情况不对。我清理了代码。

startdate到startDate enddate到endDate。如果您更改此部分，效果似乎很好。

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上设置日期选择器的值

2 个答案: