我有一个来自 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
这是输出：
你可以DateRangePickerComponent通过一个 prop 获取值：change
function DateRangePicker(){
const onChange = (props) => {
const stateDate = props.startDate;
const endDate = props.endDate;
};
return(
<>
<DateRangePickerComponent change={onChange} />
</>
)
}
按着这些次序。
changetext然后您可以使用事件对象中的属性直接打印具有配置日期格式的日期。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
通过 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