Reactjs 无法在react日期范围插件中选择日期范围

我使用插件在应用程序中选择日期范围。如下所示

导出功能仪表板（）{
历史日期=[]；
历史金额=[]；
const[dashboardSummary]=使用dashboardSummary（）；
常量[a，fetchDashboardSummary]=使用DashboardSummary（）；
let[req，setReq]=useState({
startDate:start.format（'YYYY-MM-DD'），
endDate:end.format（'YYYY-MM-DD'）
});
useffect（（）=>{
fetchDashboardSummary({
请求
});
}，[req]）
$（'#reportrange span'）.html（start.format（'MMMM D，YYYY'）+'-'+end.format（'MMMM D，YYYY'））；
if（isSuccess（仪表板摘要））{
dailyTotalCount=dashboardSummary.result.dashboardSummary.dailyTxnCount；
dailyValue=dashboardSummary.result.dashboardSummary.DailyTXN值；
dailySuccessCount=dashboardSummary.result.dashboardSummary.dailySuccessTxnCount；
让historyData=dashboardSummary.result.dashboardSummary.amountHistory
for（历史数据中的x）{
historyAmount.push（historyData[x].amount！）
historyDate.push（historyData[x].date！）
}
}
函数setDateRange（开始日期：日期，结束日期：日期）{
log（“setDateRange:start:”，startDate+“end:”，endDate）
console.log（矩（startDate）.format（“YYYY-MM-DD”））
开始=力矩（开始日期）
结束=力矩（结束日期）
setReq（{startDate:moment（startDate）.format（“YYYY-MM-DD”），endDate:moment（endDate）.format（“YYYY-MM-DD”）}）
}
常数selectionRange={
开始日期：新日期（），
endDate:新日期（），
键：'选择'，
}
功能手柄选择（范围：任意）{
setDateRange（ranges.selection.startDate、ranges.selection.endDate）
showDateRangePicker=false
}
函数onClickDateRangePicker（）{
console.log（“--onClickRangePicker”）
showDateRangePicker=true
setReq（{startDate:moment（start）.format（“YYYY-MM-DD”），endDate:moment（end）.format（“YYYY-MM-DD”）}）
}
返回
最后交易

仪表板
}
导出默认仪表板

我可以通过拖动选择日期范围，但不能单独选择开始日期和结束日期。当我点击某个日期时，它会选择该日期作为开始日期和结束日期。相反，我想分别选择开始日期和结束日期。

---

此插件中是否有此功能？还是我做错了什么？

你能发布你的完整组件吗，因为这看起来不像React。您的useState在哪里？@Kurtis Post更新为完整组件。看起来您没有使用state对象：

req

。传入的范围硬编码为

new Date（）

。您是否尝试过此处的第一个代码示例：。干杯

    export function Dashboard() {
    historyDate = [];
    historyAmount = [];

    const [dashboardSummary] = useDashboardSummary();

    const [a, fetchDashboardSummary] = useDashboardSummary();

    let [req, setReq] = useState<DashboardSummaryReqGqlInput>({
        startDate: start.format('YYYY-MM-DD'),
        endDate: end.format('YYYY-MM-DD')
    });

    useEffect(() => {
        fetchDashboardSummary({
            req
        });
    }, [req])

    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

    if (isSuccess(dashboardSummary)) {
        dailyTotalCount = dashboardSummary.result.dashboardSummary.dailyTxnCount;
        dailyValue = dashboardSummary.result.dashboardSummary.dailyTxnValue;
        dailySuccessCount = dashboardSummary.result.dashboardSummary.dailySuccessTxnCount;
        let historyData = dashboardSummary.result.dashboardSummary.amountHistory
        for(let x in historyData) {
            historyAmount.push(historyData[x].amount!)
            historyDate.push(historyData[x].date!)
        }
    }

    function setDateRange(startDate: Date, endDate: Date){
        console.log("setDateRange:  start:" , startDate + "   end:", endDate)
        console.log(moment(startDate).format("YYYY-MM-DD"))
        start = moment(startDate)
        end = moment(endDate)

        setReq({startDate: moment(startDate).format("YYYY-MM-DD"), endDate: moment(endDate).format("YYYY-MM-DD")})
    }

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

    function handleSelect(ranges: any) {
        setDateRange(ranges.selection.startDate, ranges.selection.endDate)
        showDateRangePicker = false
    }

    function onClickDateRangePicker() {
        console.log("--------onClickRangePicker")
        showDateRangePicker = true
        setReq({startDate: moment(start).format("YYYY-MM-DD"), endDate: moment(end).format("YYYY-MM-DD")})
    }

    return  <div className="container-fluid">
        <div className="row">

            <div className="col-lg-2 col-md-3 offset-lg-2 offset-md-3 second-sidebar">
                <p>Last Transactions</p>
                <RecentTransactions/>
            </div>
            <main role="main" className="col-lg-8 col-md-6 ml-sm-auto p-0">
                <div className="sub-header-dashboard">
                    <div className="row">
                        <div className="col-lg-6">
                            <h5 className="sub-text mt-lg-2 ml-md-0 ml-5">Dashboard</h5>
                        </div>

                        <div className="col-lg-6">
                            <div className="input-group">
                                <div className="input-group-prepend">
                                    <span className="input-group-text" onClick={onClickDateRangePicker}><i className="fas fa-calendar-alt"></i></span>

                                </div>
                                <div id={"date-picker-box"} style={{display: showDateRangePicker ? "block" : "none"}}>
                                    <DateRangePicker
                                        className={"datepicker"}
                                        ranges={[selectionRange]}
                                        onChange={handleSelect}/>
                                </div>
                                <div id="reportrange" className="form-control date-range-input pt-3">
                                    <span className="date-range-input__date"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                    
            </main>
        </div>
    </div>

}

export default Dashboard