SelectBox 选择框

平铺选项表单控件。

何时使用

平铺选项便于用户选择操作，作用同 Select。

代码演示

基本使用

基本使用。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { SelectBox, Button, Row, Col } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[basic new]', value, '[basic old]', oldValue);
}
​
const { Option } = SelectBox;
​
class App extends React.Component {
  state = {
    visible: true,
  };
​
  handleClick = () => this.setState({ visible: !this.state.visible });
​
  render() {
    return (
      <Row gutter={10}>
        <Col span={8}>
          <SelectBox onChange={handleChange}>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            {this.state.visible && (
              <Option value="wu" disabled>
                Wu
              </Option>
            )}

受控按钮选择框

受控按钮选择框。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { SelectBox } from 'choerodon-ui/pro';
​
const { Option } = SelectBox;
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'wu',
    };
  }
​
  handleChange = (value, oldValue) => {
    console.log('[constrolled]', 'newValue', value, '[oldValue]', oldValue);
    this.setState({
      value,
    });
  }
​
  render() {
    return (
      <SelectBox value={this.state.value} onChange={this.handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </SelectBox>
    );
  }
}
​

绑定数据源

绑定数据源。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, SelectBox, Row, Col, Form } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[dataset newValue]',
    value,
    '[oldValue]',
    oldValue,
    '[record.get(name)]',
    record.get(name),
  );
  console.log(record.toJSONData());
}
​
const { Option } = SelectBox;
​
const optionData = [
  { text: 'Jack', value: 'jack' },
  { text: 'Zhangsan', value: 'zhangsan' },
  { text: 'Lucy', value: 'lucy' },
  { text: 'Niu', value: 'jiaqin' },
  { text: 'Shao', value: 'shao' },
];
​
const data = [
  {
    'first-name': 'zhangsan',
    'last-name': 'wu',
  },
];

值列表代码

值列表代码。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, SelectBox, Button, Row, Col } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[dataset newValue]',
    value,
    '[oldValue]',
    oldValue,
    `[record.get('${name}')]`,
    record.get(name),
  );
}
​
function handleOption({ record }) {
  return {
    disabled: record.index === 0,
  };
}
​
class App extends React.Component {
  flag = false;
​
  ds = new DataSet({
    autoCreate: true,
    fields: [
      {
        name: 'sex',
        type: 'string',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        defaultValue: 'F',
      },
      {
        name: 'sex2',

多选

通过属性multiple设置多选。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, SelectBox, Row, Col } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[multiple]', value, '[oldValue]', oldValue);
}
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
const { Option } = SelectBox;
​
const data = [{
  user: ['wu'],
}];
​
class App extends React.Component {
  ds = new DataSet({
    data,
    fields: [
      { name: 'user', type: 'string', textField: 'text', label: '用户', multiple: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​

按钮视图

按钮视图。

import React from 'react';
import ReactDOM from 'react-dom';
import { SelectBox, Row, Col } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[button new]', value, '[button old]', oldValue);
}
​
const { Option } = SelectBox;
​
ReactDOM.render(
  <Row gutter={10}>
    <Col span={12}>
      <SelectBox mode="button" onChange={handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </SelectBox>
    </Col>
    <Col span={12}>
      <SelectBox mode="button" multiple onChange={handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </SelectBox>
    </Col>
  </Row>,
  document.getElementById('container'),
);
​

垂直排列

垂直排列。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { SelectBox, Row, Col } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[button new]', value, '[button old]', oldValue);
}
​
const { Option } = SelectBox;
​
ReactDOM.render(
  <Row gutter={10}>
    <Col span={2}>
      <h3>single</h3>
    </Col>
    <Col span={2}>
      <SelectBox vertical mode="button" onChange={handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </SelectBox>
    </Col>
    <Col span={2}>
      <h3>multiple</h3>
    </Col>
    <Col span={2}>
      <SelectBox vertical mode="button" multiple onChange={handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </SelectBox>
    </Col>
  </Row>,
  document.getElementById('container'),

只读

只读。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, SelectBox, Row, Col } from 'choerodon-ui/pro';
​
const { Option } = SelectBox;
​
const optionData = [
  { text: 'Jack', value: 'jack' },
  { text: 'Zhangsan', value: 'zhangsan' },
  { text: 'Lucy', value: 'lucy' },
  { text: 'Niu', value: 'jiaqin' },
  { text: 'Shao', value: 'shao' },
];
​
const data = [
  {
    name: 'zhangsan',
  },
];
​
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });
​
  ds = new DataSet({
    data,
    fields: [
      {
        name: 'name',

过滤

通过属性 optionsFilter 过滤选项。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, SelectBox, Button } from 'choerodon-ui/pro';
​
const { Option } = SelectBox;
​
const data = [
  {
    'last-name': 'zhangsan',
  },
];
​
class App extends React.Component {
  state = {
    key: 'a',
  };
​
  ds = new DataSet({
    data,
    fields: [{ name: 'last-name', type: 'string', label: '姓' }],
  });
​
  handleClick = () => {
    this.setState({ key: this.state.key === 'a' ? 'c' : 'a' });
  };
​
  optionsFilter = (record) => {
    const { key } = this.state;
    return record.get('meaning').toLowerCase().indexOf(key) !== -1;
  };
​
  render() {
    return (
      <div>

optionRenderer 输入属性

通过属性 optionRenderer 自定义选项。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, SelectBox, Tooltip, Icon } from 'choerodon-ui/pro';
​
const App = () => {
  const optionDs = new DataSet({
    selection: 'single',
    queryUrl: '/dataset/user/queries',
    autoQuery: true,
  });
  const ds = new DataSet({
    fields: [
      {
        name: 'user',
        type: 'string',
        textField: 'name',
        valueField: 'userid',
        label: '用户',
        options: optionDs,
      },
    ],
  });
  const optionRenderer = ({ text }) => (
    <Tooltip title={text} placement="left">
      <span style={{ display: 'inline-block' }}>
        {text && <Icon type="people" />} {text}
      </span>
    </Tooltip>
  );
​
  return <SelectBox dataSet={ds} name="user" optionRenderer={optionRenderer} />;
};
​
ReactDOM.render(<App />, document.getElementById('container'));

可搜索

可搜索。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, SelectBox, Form, Row, Col } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[searchable]',
    value,
    '[oldValue]',
    oldValue,
    `[record.get('${name}')]`,
    record.get(name),
  );
}
​
const { Option } = SelectBox;
const data = [
  {
    'last-name': 'zhangsan',
  },
];
​
function searchMatcher({ record, text }) {
  return record.get('value').indexOf(text) !== -1;
}
​
class App extends React.Component {
  ds = new DataSet({
    data,
    fields: [
      { name: 'last-name', type: 'string' },
      { name: 'first-name', type: 'string' },
      { name: 'sex', type: 'string', lookupCode: 'HR.EMPLOYEE_GENDER' },
    ],

API

SelectBox

更多属性请参考 Select。

SelectBox.Option

该属性请参考 Select.Option。