Установка значения Date Picker для одного onChange

Question

Я пытаюсь установить дату для двух разных типов ввода. Я попытался вызвать разные функции для обоих обработчиков событий ввода, и это сработало. Но я хочу использовать более сжатый способ управления датой ввода. Другой подход, который я пробовал вызывать single 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>
    );
  }
}

По умолчанию я устанавливаю текущую дату и меняю выбранную дату

javascript reactjs datetime onchange

0

bubble-cord 28 Май 2019 в 14:33

Answer 1

Кажется, дело не в этом. Я убрал код.

Startdate to startDate enddate to 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>
    );
  }
}

1

Ray 28 Май 2019 в 11:52

Answer 2

Вам необходимо исправить имена в форме.

Из: name="startdate" в name="startDate"

Также здесь: name="enddate" в name="endDate"

3

Dorian Mazur 28 Май 2019 в 11:55

Установка значения Date Picker для одного onChange

2 ответа

Похожие вопросы

Новые вопросы

javascript