React Form - Item Properties

To change an item property at runtime, bind the property that should be changed to a state property:

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Form, SimpleItem, GroupItem } from 'devextreme-react/form';
  • import { CheckBox } from 'devextreme-react/check-box';
  •  
  • const employee = {
  • firstName: 'John',
  • lastName: 'Heart',
  • phone: '+1(213) 555-9392',
  • email: 'jheart@dx-email.com'
  • };
  •  
  • class App extends React.Component {
  • constructor() {
  • super();
  • this.state = {
  • isPhoneVisible: true
  • };
  • this.onCheckBoxValueChanged = this.onCheckBoxValueChanged.bind(this);
  • };
  •  
  • render() {
  • return (
  • <div>
  • <Form formData={employee}>
  • <SimpleItem dataField="firstName" />
  • <SimpleItem dataField="lastName" />
  • <GroupItem caption="Contacts">
  • <SimpleItem dataField="phone" visible={this.state.isPhoneVisible} />
  • <SimpleItem dataField="email" />
  • </GroupItem>
  • </Form>
  • <CheckBox
  • text="Show the Phone Number"
  • value={this.state.isPhoneVisible}
  • onValueChanged={this.onCheckBoxValueChanged} />
  • </div>
  • );
  • }
  •  
  • onCheckBoxValueChanged(e) {
  • this.setState({
  • isPhoneVisible: e.value
  • });
  • }
  • }
  •  
  • export default App;

When you modify an item, the Form also refreshes all other items in its group. If an item is not in a group, the whole Form is refreshed. To update only your chosen items, wrap them into a separate group.

NOTE
When you call this method, Form rerenders the layout. As a result, all editors are re-initialized and their settings return to the initial editorOptions configuration.
See Also