React SelectBox - Create a User-Defined Item
A user can select existing values and add new values to the SelectBox. To enable this feature, assign true to the acceptCustomValue property.
Note that you should implement the onCustomItemCreating function to create a new data source entry. You can specify DOM events after which the component calls this function. Use the customItemCreateEvent property for this purpose. In addition to the event passed to this property, the item can also be created when users press the Enter key.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import SelectBox from 'devextreme-react/select-box';
- import DataSource from "devextreme/data/data_source";
- const selectBoxData = new DataSource({
- store: [
- { id: 1, firstName: "Andrew" },
- { id: 2, firstName: "Nancy" },
- { id: 3, firstName: "Steven" }
- ],
- key: "id"
- });
- class App extends React.Component {
- customItemCreating(e) {
- // Generates a new 'id'
- let nextId;
- selectBoxData.store().totalCount().done(count => {nextId = count + 1});
- // Creates a new entry
- e.customItem = { id: nextId, firstName: e.text };
- // Adds the entry to the data source
- selectBoxData.store().insert(e.customItem);
- // Reloads the data source
- selectBoxData.reload();
- }
- render() {
- return (
- <SelectBox ...
- dataSource={selectBoxData}
- valueExpr="id"
- displayExpr="firstName"
- acceptCustomValue={true}
- customItemCreateEvent="focusout"
- onCustomItemCreating={this.customItemCreating}
- />
- );
- }
- }
- export default App;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.