React Forms - Overview | React Example

import React from 'react'; import { Form, GroupItem, Label, SimpleItem, } from 'devextreme-react/form'; import 'devextreme/ui/select_box'; import 'devextreme/ui/text_area'; import { employee, positions, states } from './data.ts'; const birthDateOptions = { width: '100%' }; const positionOptions = { items: positions, value: '', }; const stateOptions = { items: states, }; const phoneOptions = { mask: '+1 (000) 000-0000' }; const notesOptions = { height: 140 }; const avatarRender = () => ( <div className="form-avatar"></div> ); export default function App() { return ( <Form formData={employee}> <GroupItem cssClass="form-group" colCount={4}> <SimpleItem render={avatarRender}> </SimpleItem> <GroupItem colSpan={3}> <SimpleItem dataField="FirstName" /> <SimpleItem dataField="LastName" /> <SimpleItem dataField="BirthDate" editorType="dxDateBox" editorOptions={birthDateOptions} /> </GroupItem> </GroupItem> <GroupItem cssClass="form-group" colCount={2}> <GroupItem> <SimpleItem dataField="Address" /> <SimpleItem dataField="City" /> <SimpleItem dataField="Position" editorType="dxSelectBox" editorOptions={positionOptions} /> </GroupItem> <GroupItem> <SimpleItem dataField="State" editorType="dxSelectBox" editorOptions={stateOptions} /> <SimpleItem dataField="ZipCode" /> <SimpleItem dataField="Mobile" editorOptions={phoneOptions}> <Label text="Phone" /> </SimpleItem> </GroupItem> <SimpleItem colSpan={2} dataField="Notes" editorType="dxTextArea" editorOptions={notesOptions} /> </GroupItem> </Form> ); }

import React from 'react'; import { Form, GroupItem, Label, SimpleItem, } from 'devextreme-react/form'; import 'devextreme/ui/select_box'; import 'devextreme/ui/text_area'; import { employee, positions, states } from './data.js'; const birthDateOptions = { width: '100%' }; const positionOptions = { items: positions, value: '', }; const stateOptions = { items: states, }; const phoneOptions = { mask: '+1 (000) 000-0000' }; const notesOptions = { height: 140 }; const avatarRender = () => <div className="form-avatar"></div>; export default function App() { return ( <Form formData={employee}> <GroupItem cssClass="form-group" colCount={4} > <SimpleItem render={avatarRender}></SimpleItem> <GroupItem colSpan={3}> <SimpleItem dataField="FirstName" /> <SimpleItem dataField="LastName" /> <SimpleItem dataField="BirthDate" editorType="dxDateBox" editorOptions={birthDateOptions} /> </GroupItem> </GroupItem> <GroupItem cssClass="form-group" colCount={2} > <GroupItem> <SimpleItem dataField="Address" /> <SimpleItem dataField="City" /> <SimpleItem dataField="Position" editorType="dxSelectBox" editorOptions={positionOptions} /> </GroupItem> <GroupItem> <SimpleItem dataField="State" editorType="dxSelectBox" editorOptions={stateOptions} /> <SimpleItem dataField="ZipCode" /> <SimpleItem dataField="Mobile" editorOptions={phoneOptions} > <Label text="Phone" /> </SimpleItem> </GroupItem> <SimpleItem colSpan={2} dataField="Notes" editorType="dxTextArea" editorOptions={notesOptions} /> </GroupItem> </Form> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const employee = { ID: 1, FirstName: 'John', LastName: 'Heart', Position: 'CEO', BirthDate: '1964/03/16', HireDate: '1995/01/15', Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', Address: '351 S Hill St.', City: 'Los Angeles', State: 'CA', ZipCode: '90013', Home: '555-684-1334', Mobile: '555-684-1335', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', }; export const positions = [ 'HR Manager', 'IT Manager', 'CEO', 'Controller', 'Sales Manager', 'Support Manager', 'Shipping Manager', ]; export const states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const employee = { ID: 1, FirstName: 'John', LastName: 'Heart', Position: 'CEO', BirthDate: '1964/03/16', HireDate: '1995/01/15', Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', Address: '351 S Hill St.', City: 'Los Angeles', State: 'CA', ZipCode: '90013', Home: '555-684-1334', Mobile: '555-684-1335', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', }; export const positions = [ 'HR Manager', 'IT Manager', 'CEO', 'Controller', 'Sales Manager', 'Support Manager', 'Shipping Manager', ]; export const states = [ 'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY', ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

.form-group { padding: 20px; } .form-avatar { height: 128px; width: 128px; margin-right: 10px; border: 1px solid #d2d3d5; border-radius: 50%; background-image: url('../../../../images/petersmith.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }