Как я могу обновлять React Date Picker каждый раз, когда выбрано поле выбора - PullRequest
Новая
       52

Как я могу обновлять React Date Picker каждый раз, когда выбрано поле выбора

0 голосов
/ 17 апреля 2019

У меня есть требование разрешить пользователю обновлять начальные значения start date и end date, которые должны быть вычислены в значение number of days между start date и end date.Например, если start date равно 04/18/19, а end date равно 4/20/19, то number of days is 2.Поэтому я хочу, чтобы это авто обновлялось в моем React компоненте.

import React, { Component } from 'react';
import moment from 'moment-timezone';
import DatePicker from 'react-datepicker';
import {Form, Dropdown} from 'semantic-ui-react';

class ReviewerRequirements extends Component {
  state = {
    startDate: null,
    endData: null,
    numOfDaysForReview: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  };
  
  componentDidMount = () => {
    const { startDate, endDate } = this.state;
    const daysTotal = moment(endDate).diff(startDate, 'days');

    this.setState({
      reviewerSearch: {
        numOfDaysForReview: daysTotal,
      },
    });
  };
  
  handleSearchFilterChange = (e, { name, value }) => {
    this.setState({
      numOfDaysForReview: { ...this.state.numOfDaysForReview, [name]: value },
    });
  };
  
  handleStartDateChange = () => {}
  handleEndDateChange = () => {}
  
  render() {
      const {
        startDate,
        endDate,
       numOfDaysForReview,
      } = this.state;
    return (
      <div className="ui grid">
        <div className="four wide column">
          <Form.Field
            name="numOfDaysForReview"
            label=""
            placeholder="Enter # of days"
            value={numOfDaysForReview}
            onChange={this.handleSearchFilterChange}
            category={'numOfDaysForReview'}
            control={AmsLookupDropdown}
            fluid
            search
            selection
          />
        </div>
        <div className="six wide column">
          <Form.Field
            name="startDate"
            control={DatePicker}
            placeholder="Please select start Date"
            sClearable={true}
            selected={startDate && startDate}
            selectsStart
            minDate={moment()}
            startDate={startDate && startDate}
            onChange={this.handleStartDateChange}
          />
        </div>
        <div className="six wide column">
          <Form.Field
            name="endDate"
            control={DatePicker}
            placeholder="Please select end date"
            isClearable={true}
            selected={endDate && endDate}
            selectsEnd
            startDate={startDate && startDate}
            minDate={startDate && startDate}
            endDate={endDate}
            onChange={this.handleEndDateChange}
          />
        </div>
      </div>
    );
  };
}

Поэтому я хочу, чтобы numOfDaysForReview автоматически обновлялся до правильного количества дней между startDate и endDate при изменении любого из DatePicker's.

И я хочу, чтобы endDate DatePicker изменялся при изменении значения numOfDaysForReview.

...