onChange（ReactJS）のコンポジットdatepicker 2の値を取得

Question

私はmaterialuiのDatePickerコンポーネントを使用しています.2つのDatePickerコンポーネントの値を1つの関数で取得して範囲を作成する必要があります。

私は、すでにDatePickerコンポーネントの値を取得することができるhandleChange関数を作成しましたが、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>

Answer 1

第一日付ピッカーと第二日付ピッカーから日付の選択は、異なる時間に発生したとして、あなたはへの引数として2つの日付を取得することはできません関数。

代わりに、DatePickerごとに1つずつ、2つの異なる関数を作成する必要があります。これらの関数は、日付を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> 
    ) 
    } 
}