在 onChange (ReactJS) 中获取 2 个组合日期选择器的值答案

【问题标题】：get value of 2 composant datepicker in onChange (ReactJS)在 onChange (ReactJS) 中获取 2 个组合日期选择器的值
【发布时间】：2018-04-07 14:52:49
【问题描述】：

我正在使用materialui的DatePicker组件，我需要在一个函数中获取两个DatePicker组件的值来做一个范围。

我创建了一个 handleChange 函数，它已经允许检索 DatePicker 组件的值，但对于 2 个组件我不能这样做。

我想知道我需要采取的步骤。

这是我的代码：

import React from 'react';
import moment from 'moment';
import 'moment/locale/fr'
import DatePicker from 'material-ui/DatePicker';
import areIntlLocalesSupported from 'intl-locales-supported';


let DateTimeFormat;

if (areIntlLocalesSupported(['fr'])) {
  DateTimeFormat = global.Intl.DateTimeFormat;
} else {
    const IntlPolyfill = require('intl');
    DateTimeFormat = IntlPolyfill.DateTimeFormat;
    require('intl/locale-data/jsonp/fr');
    require('intl/locale-data/jsonp/fa-IR');
}


class SearchByDate extends React.Component {

  handleSearchByDate = (evt, date) => {
    console.log(date)
  }

  render() {
    return (
      <div>
        <DatePicker
            ref="dateChoiceOne"
            name="dateChoiceOne"
            hintText="Date début"
            DateTimeFormat={DateTimeFormat}
            okLabel="OK"
            cancelLabel="Annuler"
            locale="fr"
            onChange={this.handleSearchByDate}/>

        <DatePicker
            ref="dateChoiceTwo"
            name="dateChoiceTwo"
            hintText="Date fin"
            DateTimeFormat={DateTimeFormat}
            okLabel="OK"
            cancelLabel="Annuler"
            locale="fr"
            onChange={this.handleSearchByDate} />
      </div> 
    )
  }
}

export default SearchByDate;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【问题讨论】：

尝试在handleSearchByDate 中记录evt.target.name
@anand 我试过了，但它不起作用。当我阅读 DatePicker 组件的 Material UI 文档时，我看到 onChange 属性正在调用的函数的“事件”参数返回一个空值。 (material-ui.com/#/components/date-picker) => 签名：function(null: undefined, date: object) => void null：由于没有与更改关联的特定事件，第一个参数将始终为 null。日期：新日期。

标签： javascript reactjs datepicker momentjs material-ui

【解决方案1】：

由于第一个 DatePicker 和第二个 DatePicker 的日期选择发生在不同的时间，因此您无法将这两个日期作为参数传入函数。

相反，您应该创建 2 个不同的函数，每个 DatePicker 一个。这些函数会将日期保存为startDate 和endDate，您可以在componentDidUpdate 中查看状态更新；一旦你设置了两个日期，你就可以做任何你想做的事情。

class SearchByDate extends React.Component {
  componentDidUpdate = () => {
    if (this.state.startDate && this.state.endDate) {
      // Both dates are set, do something with it
    }
  }

  handleChangeStartDate = (evt, date) => {
    this.setState({
      startDate: date,
    });
  }

  handleChangeEndDate = (evt, date) => {
    this.setState({
      endDate: date,
    });
  }

  render() {
    return (
      <div>
        <DatePicker
          ref="dateChoiceOne"
          name="dateChoiceOne"
          hintText="Date début"
          DateTimeFormat={DateTimeFormat}
          okLabel="OK"
          cancelLabel="Annuler"
          locale="fr"
          onChange={this.handleChangeStartDate}
        />

        <DatePicker
          ref="dateChoiceTwo"
          name="dateChoiceTwo"
          hintText="Date fin"
          DateTimeFormat={DateTimeFormat}
          okLabel="OK"
          cancelLabel="Annuler"
          locale="fr"
          onChange={this.handleChangeEndDate}
        />
      </div> 
    )
  }
}

【讨论】：