Как получить начальное и конечное значение даты в наборе выбора диапазона ответа?

Question

В моем коде я использовал один из компонентов реакции npm для выбора диапазона дат (https://www.npmjs.com/package/react-date-range). На моем экране у меня кнопка подачи дат. Если я нажму эту кнопку, я хочу напечатать значение диапазона дат. Как получить значение этого диапазона onclick?

var Calendarcomponent = React.createClass({ 
    getInitialState: function(){ 
     this.state = { 
      'rangePicker' : {}, 
      'linked' : {}, 
      'datePicker' : null, 
      'firstDayOfWeek' : null, 
      'predefined' : {}, 
     } 
    } 
    handleSelect:function(range){ 
    console.log(range); 
    }, 
    handleClick:function(range){ 
    console.log(range); 
    }, 
    render:function(){ 
    var rangePicker = this.state; 
    var format = 'dddd, D MMMM YYYY'; 
     return (
     <div> 
      <h4>FILTER BY DATE</h4> 
      <div className="date-range text-center"> 
       <div className="group">  
<label>Date range</label> 
        <input className="inputMaterial" type="text" value={ rangePicker['endDate'] && rangePicker['endDate'].format(format).toString() } required /> 
       </div> 
      </div> 
      <div className="set-borrow-dates"> 
       <div id="select-date">Select Borrow date</div> 
       <DateRange onInit={this.handleSelect} onclick={this.handleClick} /> 
       <button id="apply-dates"><i className="fa fa-check-circle"></i> Apply Dates</button> 
      </div> 
     </div> 
    ) 
    } 
}); 

Answer 1

Вы можете использовать onChange обратный вызов для хранения диапазона в состоянии и прочитать его при нажатии кнопки:

handleSelect(range){ 
    this.setState({ range }); 
}, 

handleClick(){ 
    console.log(this.state.range); 
}, 

render:function(){ 
    return <div> 
    <DateRange onInit={this.handleSelect} 
    onChange={this.handleSelect} /> 
    <button id="apply-dates" onClick={this.handleClick} > 
     <i className="fa fa-check-circle"></i> 
     Apply Dates 
    </button> 
    </div>; 
}