데모
입력 | Input(React)
콤보박스 | ComboBox
문자열

ComboBox(문자열 포함) (React)

기본적으로 ComboBox는 일반 HTML 입력 요소 역할을 하며, 모든 Wijmo 컨트롤과 관련된 추가 스타일 지정 및 객체 모델을 포함합니다.

Input 컨트롤 알아보기| ComboBox API Reference

이 데모는 React를 기반으로합니다.

JavaScript
Angular
React
Vue
app.jsx
index.html
app.css
data.jsx
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as wjInput from '@mescius/wijmo.react.input';
import './app.css';
import { countries } from './data';
function App() {
    const [text, setText] = useState(null);
    const [value, setValue] = useState(null);
    const [isRequired, setIsRequired] = useState(false);
    const [isEditable, setIsEditable] = useState(true);
    const [customText, setCustomText] = useState(null);
    const initComboNoSrc = useEvent((sender) => {
        setText(sender.text);
    });
    const onTextChanged = useEvent((sender) => {
        setText(sender.text);
    });
    const initCombo = useEvent((sender) => {
        setValue(sender.selectedValue);
    });
    const initComboCustom = useEvent((sender) => {
        setCustomText(sender.text);
    });
    const onComboSelectedIndexChanged = useEvent((sender) => {
        setValue(sender.selectedValue);
    });
    const onCustomComboSelectedIndexChanged = useEvent((sender) => {
        setCustomText(sender.text);
    });
    const changeRequired = useEvent((value) => {
        setIsRequired(value);
    });
    const changeEditable = useEvent((value) => {
        setIsEditable(value);
    });
    return (<div className="container-fluid">
      <p>
        The <b>text</b> property gets or sets the user's input:
      </p>
      <div className="form-group">
        <label htmlFor="theComboNoSrc">Any string:</label>
        <wjInput.ComboBox id="theComboNoSrc" initialized={initComboNoSrc} textChanged={onTextChanged}>
        </wjInput.ComboBox>
      </div>
      <p>
        You have typed this: <b>{text}</b>.
      </p>

      <h4>Choosing from Lists</h4>
      <p>
        If you want to provide a list of strings for users to choose from, set the <b>itemsSource</b> property to an
        array containing those items and users will be able to select one of them:
      </p>
      <div className="form-group">
        <label htmlFor="theCombo">Select a Country:</label>
        <wjInput.ComboBox id="theCombo" itemsSource={countries} initialized={initCombo} selectedIndexChanged={onComboSelectedIndexChanged}>
        </wjInput.ComboBox>
      </div>
      <p>
        You have selected this country: <b>{value}</b>.
      </p>

      <h4>Simple Customizations</h4>
      <p>
        By default, the ComboBox will force users to select one of the items on the list. Users will not be able to
        leave the combo empty or to enter values that are not on the list.
      </p>
      <p>
        You can change these behaviors by setting the <b>isRequired</b> and <b>isEditable</b> properties:</p>
      <p>
        <label>
          <input id="isRequired" type="checkbox" onChange={e => changeRequired(e.target.checked)} defaultChecked={isRequired}/>
          isRequired
        </label>
      </p>
      <p>
        <label>
          <input id="isEditable" type="checkbox" onChange={e => changeEditable(e.target.checked)} defaultChecked={isEditable}/>
          isEditable
        </label>
      </p>
      <div className="form-group">
        <label htmlFor="theComboCustom">Select a Country:</label>
        <wjInput.ComboBox id="theComboCustom" initialized={initComboCustom} placeholder="No Country Selected" itemsSource={countries} isRequired={isRequired} isEditable={isEditable} textChanged={onCustomComboSelectedIndexChanged}>
        </wjInput.ComboBox>
      </div>
      <p>
        You have selected this country: <b>{customText}</b>.
      </p>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React, { useState } from 'react'; import useEvent from 'react-use-event-hook'; import * as wjInput from '@mescius/wijmo.react.input'; import './app.css'; import { countries } from './data'; function App() { const [text, setText] = useState(null); const [value, setValue] = useState(null); const [isRequired, setIsRequired] = useState(false); const [isEditable, setIsEditable] = useState(true); const [customText, setCustomText] = useState(null); const initComboNoSrc = useEvent((sender) => { setText(sender.text); }); const onTextChanged = useEvent((sender) => { setText(sender.text); }); const initCombo = useEvent((sender) => { setValue(sender.selectedValue); }); const initComboCustom = useEvent((sender) => { setCustomText(sender.text); }); const onComboSelectedIndexChanged = useEvent((sender) => { setValue(sender.selectedValue); }); const onCustomComboSelectedIndexChanged = useEvent((sender) => { setCustomText(sender.text); }); const changeRequired = useEvent((value) => { setIsRequired(value); }); const changeEditable = useEvent((value) => { setIsEditable(value); }); return (<div className="container-fluid"> <p> The <b>text</b> property gets or sets the user's input: </p> <div className="form-group"> <label htmlFor="theComboNoSrc">Any string:</label> <wjInput.ComboBox id="theComboNoSrc" initialized={initComboNoSrc} textChanged={onTextChanged}> </wjInput.ComboBox> </div> <p> You have typed this: <b>{text}</b>. </p> <h4>Choosing from Lists</h4> <p> If you want to provide a list of strings for users to choose from, set the <b>itemsSource</b> property to an array containing those items and users will be able to select one of them: </p> <div className="form-group"> <label htmlFor="theCombo">Select a Country:</label> <wjInput.ComboBox id="theCombo" itemsSource={countries} initialized={initCombo} selectedIndexChanged={onComboSelectedIndexChanged}> </wjInput.ComboBox> </div> <p> You have selected this country: <b>{value}</b>. </p> <h4>Simple Customizations</h4> <p> By default, the ComboBox will force users to select one of the items on the list. Users will not be able to leave the combo empty or to enter values that are not on the list. </p> <p> You can change these behaviors by setting the <b>isRequired</b> and <b>isEditable</b> properties:</p> <p> <label> <input id="isRequired" type="checkbox" onChange={e => changeRequired(e.target.checked)} defaultChecked={isRequired}/> isRequired </label> </p> <p> <label> <input id="isEditable" type="checkbox" onChange={e => changeEditable(e.target.checked)} defaultChecked={isEditable}/> isEditable </label> </p> <div className="form-group"> <label htmlFor="theComboCustom">Select a Country:</label> <wjInput.ComboBox id="theComboCustom" initialized={initComboCustom} placeholder="No Country Selected" itemsSource={countries} isRequired={isRequired} isEditable={isEditable} textChanged={onCustomComboSelectedIndexChanged}> </wjInput.ComboBox> </div> <p> You have selected this country: <b>{customText}</b>. </p> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo ComboBox with Strings</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
h4 { margin-top: 24px; } label { margin-right: 3px; }
function getCountries() { return ['Austria', 'Australia', 'Belgium', 'Brazil', 'Canada', 'Chile', 'Denmark', 'Estonia', 'France', 'Germany', 'Hungary', 'Italy', 'Israel', 'Japan', 'Korea', 'Mexico', 'Norway', 'Oman', 'Poland', 'Qatar', 'Russia', 'Sweden', 'Scotland', 'Turkey', 'United Kingdom', 'United States', 'Vietnam', 'Yemen', 'Zambia']; } export const countries = getCountries();
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'react-dom/client': 'npm:react-dom/umd/react-dom.production.min.js', 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);