如何在 React js 上获取 DateRangePicker (syncfusion) 的值答案

【问题标题】：How to get the value of DateRangePicker (syncfusion) on react js如何在 React js 上获取 DateRangePicker (syncfusion) 的值
【发布时间】：2021-08-24 07:50:53
【问题描述】：

我有一个来自 Syncfusion 的日期范围选择器，我安装了包并将组件导入到我的 react 项目中。我对 DateRangePicker 很陌生，所以我想知道如何获得 DateRangePicker 的值。

这是我的代码

import React from 'react'
import './DateRangePicker.css'
import {DateRangePickerComponent} from '@syncfusion/ej2-react-calendars'

function DateRangePicker(){
    return(
        <>
            <DateRangePickerComponent></DateRangePickerComponent>
        </>
    )
}

export default DateRangePicker

这是输出：

【问题讨论】：

标签： reactjs syncfusion daterangepicker

【解决方案1】：

你可以通过一个prop获取DateRangePickerComponent的值：change

function DateRangePicker(){
    const onChange = (props) => {
        const stateDate = props.startDate;
        const endDate = props.endDate;

    };
    return(
        <>
            <DateRangePickerComponent change={onChange} />
        </>
    )
}

【讨论】：

【解决方案2】：

按照这些步骤操作。

在组件中创建一个事件处理程序并使用 change 属性将其传递给 syncfusion 日历。
然后您可以使用事件对象中的text属性直接打印配置日期格式的日期。

import { useState } from "react";
import { DateRangePickerComponent } from "@syncfusion/ej2-react-calendars";

import "./styles.css";

const App = () => {
  const [date, updateDate] = useState();

  const onChange = (e) => {
    updateDate(e.text);
  }; // the event handler

  return (
    <div className="container">
      <DateRangePickerComponent change={onChange} />
      <div>Date - {date}</div>
    </div>
  );
};

export default App;

https://codesandbox.io/s/syncfusion-calendar-gc7ks?file=/src/App.js:0-422

【讨论】：

【解决方案3】：

通过 ref 属性访问组件实例，我们可以得到选中的值。参考以下代码。

function DateRangePicker() {
    function onClick(){
      console.log(dateRangeRef.value)
    }
    let dateRangeRef =  dateRange => dateRangeRef = dateRange;
    return (
      <>
        <DateRangePickerComponent ref={dateRangeRef} />
        <input type="button" value="getSelectedValue" onClick={onClick} />
      </>
    );
  }
  
  render(<DateRangePicker />, document.getElementById('sample'));

请在下面找到示例。

示例链接：https://stackblitz.com/edit/react-hykg6v

API 文档链接：https://ej2.syncfusion.com/react/documentation/api/daterangepicker#value

【讨论】：