javascript - 每次选择选择框时如何更新 React Date Picker

Question

我有一个要求，允许用户更新初始的start dateandend date和计算成介于andnumber of days之间的值。例如，如果is和the是. 所以我希望这个自动更新在我的组件中。start dateend datestart date04/18/19end date4/20/19number of days is 2React

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数。endDateDatePicker's

我希望endDateDatePicker 在值发生变化时numOfDaysForReview发生变化。