「B/S端开发」DevExtreme初级入门教程(React篇) - 状态管理 DevExtremeReactjavascripthtml
程序员文章站
2022-03-03 13:46:36
...
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> <TextBox value={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 ( <Scheduler dataSource={appointments} height={600} editing={false} defaultCurrentDate={new Date(2019, 4, 22)} startDayHour={9} /> ); } } export default App;
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群5:742234706 欢迎一起进群讨论
推荐阅读
-
「B/S端开发」DevExtreme初级入门教程 - 用模板生成一个应用 DevExtremeVUEvue.jsB/S端开发
-
「B/S端开发」DevExtreme React组件及入门指南分享 DevExtremeReactJavaScriptHTML5
-
「B/S端开发」DevExtreme初级入门教程 - 用模板生成一个应用 DevExtremeVUEvue.jsB/S端开发
-
「B/S端开发」DevExtreme初级入门教程(React篇) - 状态管理 DevExtremeReactjavascripthtml
-
「B/S端开发」DevExtreme初级入门教程 - Vue篇入门指南 DevExtremeVueVue UI触控式 UI 组件
-
「B/S端开发」DevExtreme初级入门教程 - 添加到Vue应用程序 B/SDevExtremejavascriptvuevue.js
-
「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript DevExpressDevExtremevueTypeScript
-
「B/S端开发」DevExtreme初级入门教程 - 主题配置 & 验证 DevExtremevueB/S
-
「B/S端开发」DevExtreme初级入门教程 - 配置应用菜单、工具栏 DevExtremeVuejavascriptB/S
-
「B/S端开发」DevExtreme初级入门教程 - 主题配置 & 验证 DevExtremevueB/S