如何在React日期範圍選取器中獲取開始日期和結束日期值？

Question

在我的代碼中，我使用了日期範圍選取器（https://www.npmjs.com/package/react-date-range）的npm反應組件之一。在我的屏幕上，我有一個應用日期按鈕。如果我點擊那個按鈕，我想打印日期範圍值。如何獲得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>; 
}