DevExtreme初级入门教程（React篇）：状态管理

受控模式

在受控模式下，父React组件更新DevExtreme组件的状态。它应该通过属性将新值传递给DevExtreme组件，就像以下代码中TextBox组件的value属性一样。

DevExtreme组件引发事件，您应该处理这些事件以更新父组件的状态。仅当用户与组件交互时才会引发这些事件，而不会在您以编程方式更新属性值时引发。 每个事件名称都基于属性名称，例如，value 属性的事件是 onValueChange。 事件处理程序接受一个新的属性值作为参数：

App.js

import React from 'react';import 'devextreme/dist/css/dx.light.css';import TextBox from 'devextreme-react/text-box';class App extends React.Component {constructor(props) {super(props);this.state = {text: 'TEXT'};this.handleValueChange = this.handleValueChange.bind(this);}render() {return (<div><TextBoxvalue={this.state.text}onValueChange={this.handleValueChange}valueChangeEvent="input"/><br /><div>{this.state.text}</div></div>);}handleValueChange(value) {this.setState({text: value.toUpperCase()});}}export default App;

非受控制模式

在非受控制的模式下，DevExtreme组件维护和更新自己的状态。

要在此模式下指定初始属性值，请将默认前缀添加到属性名称。 在下面的示例中，defaultCurrentDate 属性用于定义 currentDate 属性的初始值。

App.js

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)}];class App extends React.Component {render() {return (<SchedulerdataSource={appointments}height={600}editing={false}defaultCurrentDate={new Date(2019, 4, 22)}startDayHour={9}/>);}}export default App;

DevExtreme | 下载试用

DevExpress技术交流群5：742234706      欢迎一起进群讨论