DevExtreme React - State Management
React.js offers two ways to access and influence your components' state and content.
Components that use the controlled state management mode delegate data storage and state management to other entities. Such components use props to receive data from their parents, and callbacks to notify their parent of state updates. The official React documentation recommends this technique for most users.
Components that use the uncontrolled state management mode are self-contained. Like traditional HTML, they store data directly inside the DOM. You can use refs
to access this data.
Controlled Mode
To manage the state of a controlled component, use the component's props. In the example below, the parent of the TextBox
component determines the value
property of its child.
DevExtreme components raise events in response to user interaction. The names of these events include the name of the property that changed. For example, when the user changes the value
property, the component raises the onValueChange
event. The handler for this event accepts the new property value as a parameter.
Handle component events to update the parent component's state. Note: components don't fire events when you update component data programmatically.
import React, { useState } from 'react'; import 'devextreme/dist/css/dx.light.css'; import TextBox from 'devextreme-react/text-box'; const App = () => { const [text, setText] = useState('TEXT'); const handleValueChange = (value) => { setText(value.toUpperCase()); }; return ( <div> <TextBox value={text} onValueChange={handleValueChange} valueChangeEvent="input" /> <br /> <div>{text}</div> </div> ); }; export default App;
Uncontrolled Mode
Uncontrolled DevExtreme components maintain and update their own state.
To specify an initial property value in this mode, add the default
prefix to the property name. In the example below, the defaultCurrentDate
attribute defines the initial value of the currentDate
property.
import React from 'react'; import 'devextreme/dist/css/dx.light.compact.css'; import Scheduler from 'devextreme-react/scheduler'; const Appointments = [ { text: 'Website Re-Design Plan', startDate: new Date(2019, 4, 22, 9, 30), endDate: new Date(2019, 4, 22, 11, 30), }, { text: 'Book Flights to San Fran for Sales Trip', startDate: new Date(2019, 4, 22, 12, 0), endDate: new Date(2019, 4, 22, 13, 0), allDay: true, }, { text: 'Install New Router in Dev Room', startDate: new Date(2019, 4, 23, 10, 30), endDate: new Date(2019, 4, 23, 16, 30), }, ]; const App = () => { return ( <Scheduler dataSource={Appointments} height={600} editing={false} defaultCurrentDate={new Date(2019, 4, 22)} currentDate={new Date(2019, 4, 22)} startDayHour={9} /> ); }; export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.