Reactjs 在“反应日期范围”中标识选定的日期范围

我正在使用react日期范围插件选择日期范围

import { DateRangePicker} from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

以下函数用于在选择范围时处理日期范围

    function handleSelect() {
            
    }

我添加了DateRangePicker，如下所示

const selectionRange = {
    startDate: new Date(),
    endDate: new Date(),
    key: 'selection',
}

<div>
    <DateRangePicker
    ranges={[selectionRange]}
    onChange={handleSelect}/>
</div>

const selectionRange={
开始日期：新日期（），
endDate:新日期（），
键：'选择'，
}

我想在handleChange函数中对选定的日期范围进行一些操作。但我找不到如何确定选择的日期范围以及相应的开始和结束日期

在文档中，onChange回调描述为

但我无法理解如何获取这些startDate和endDate参数。 有人能帮我得到这个值吗

文档：

根据

onChange

回调将

范围作为参数接收：

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(ranges){
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //   }
    // }
  }
  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
    return (
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      />
    )
  }
}

从'react date range'导入{DateRangePicker}；
类MyComponent扩展组件{
handleSelect（范围）{
控制台日志（范围）；
// {
//选择：{
//startDate:[本机日期对象]，
//endDate:[本机日期对象]，
//   }
// }
}
render（）{
常数selectionRange={
开始日期：新日期（），
endDate:新日期（），
键：'选择'，
}
返回(
)
}
}

它应该是一个具有键
selection
的对象，该键本身就是一个包含
startDate
和
endDate
的对象。您将在其处理函数
handleSelect（date）{console.log（date）；//native date object}中获得所选的日期范围
单击日期输入后如何打开日期范围？我是说，我不想一直开着。