برای پیاده سازی کمبوباکس از تگ SelectBox استفاده می کنیم.

import React from 'react';

import { SelectBox } from 'devextreme-react/select-box';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      allMode: 'allPages',
    };

    this.onAllModeChanged = this.onAllModeChanged.bind(this);
  }

  render() {
    const { allMode} = this.state;

    return (
      <div>
       
        <div className="options">
          <div className="option">
            <span>Select All Mode </span>
            <SelectBox
              id="select-all-mode"
              dataSource={['allPages', 'page']}
              value={allMode}
              disabled={checkBoxesMode === 'none'}
              onValueChanged={this.onAllModeChanged}
            />
          </div>
          
        </div>
      </div>
    );
  }

 

  onAllModeChanged({ value }) {
    this.setState({ allMode: value });
  }
}

export default App;

dataSource : در این خصوصیت آیتم های کمبوباکس را می دهیم.

value : مقداری که سمت سرور فرستاده می شود.

disabled : برای غیرفعال کردن کمبوباکس در صورت تمایل

onValueChanged : متدی که هنگام انتخاب یک آیتم از کمبوباکس فراخوانی می شود.