SelectBox选择框

表单控件。

何时使用

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

代码演示

基本使用

基本使用。

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>
            )}
          </SelectBox>
        </Col>
        <Col span={4}>
          <Button onClick={this.handleClick}>修改选项</Button>
        </Col>
        <Col span={12}>
          <SelectBox disabled>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="wu">Wu</Option>
          </SelectBox>
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

绑定数据源

绑定数据源。

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: 'Huazhen', value: 'huazhen' },
  { text: 'Lucy', value: 'lucy' },
  { text: 'Niu', value: 'jiaqin' },
  { text: 'Shao', value: 'shao' },
];
const data = [{
  'first-name': 'huazhen',
  'last-name': 'wu',
}];
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });
  ds = new DataSet({
    data,
    fields: [
      { name: 'first-name', type: 'string', label: '名', textField: 'text', valueField: 'value', options: this.optionDs },
      { name: 'last-name', type: 'string', label: '姓', multiple: ',' },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Form dataSet={this.ds}>
        <Row gutter={10}>
          <Col span={12}>
            <SelectBox name="first-name" />
          </Col>
          <Col span={12}>
            <SelectBox name="last-name">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="wu">Wu</Option>
            </SelectBox>
          </Col>
        </Row>
      </Form>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

多选

通过属性multiple设置多选。

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,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <SelectBox dataSet={this.ds} name="user">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="wu">Wu</Option>
          </SelectBox>
        </Col>
        <Col span={12}>
          <SelectBox multiple onChange={handleChange}>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="wu">Wu</Option>
          </SelectBox>
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

垂直排列

垂直排列。

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 vertical 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 vertical mode="button" multiple onChange={handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </SelectBox>
    </Col>
  </Row>,
  mountNode
);

受控按钮选则框

受控按钮选则框。

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>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

值列表代码

值列表代码。

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', type: 'string', lookupUrl: '/common/code/HR.EMPLOYEE_GENDER/' },
      { name: 'lov', type: 'string', lovCode: 'LOV_CODE', defaultValue: 'SYS.PROFILE_LEVEL_ID' },
      {
        name: 'lov2',
        type: 'string',
        lovCode: 'LOV_CODE',
        defaultValue: ['SYS.PROFILE_LEVEL_ID', 'SYS.RESOURCE_TYPE'],
        multiple: true,
      },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  changeLookupCode = () => {
    this.flag = !this.flag;
    this.ds.getField('sex').set('lookupCode', this.flag ? 'SYS.USER_STATUS' : 'HR.EMPLOYEE_GENDER');
  };
  render() {
    return (
      <Row gutter={10}>
        <Col span={6}>
          <SelectBox dataSet={this.ds} name="sex" placeholder="请选择" onOption={handleOption} />
        </Col>
        <Col span={6}>
          <Button onClick={this.changeLookupCode}>修改lookupCode</Button>
        </Col>
        <Col span={12}>
          <SelectBox dataSet={this.ds} name="sex2" placeholder="请选择" />
        </Col>
        <Col span={12}>
          <SelectBox dataSet={this.ds} name="lov" placeholder="请选择" />
        </Col>
        <Col span={12}>
          <SelectBox dataSet={this.ds} name="lov2" placeholder="请选择" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

按钮视图

按钮视图。

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>,
  mountNode
);

只读

只读。

import { DataSet, SelectBox, Row, Col } from 'choerodon-ui/pro';
const { Option } = SelectBox;
const optionData = [
  { text: 'Jack', value: 'jack' },
  { text: 'Huazhen', value: 'huazhen' },
  { text: 'Lucy', value: 'lucy' },
  { text: 'Niu', value: 'jiaqin' },
  { text: 'Shao', value: 'shao' },
];
const data = [{
  name: 'huazhen',
}];
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });
  ds = new DataSet({
    data,
    fields: [
      { name: 'name', textField: 'text', valueField: 'value', options: this.optionDs, readOnly: true },
    ],
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <SelectBox readOnly>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="wu">Wu</Option>
          </SelectBox>
        </Col>
        <Col span={12}>
          <SelectBox dataSet={this.ds} name="name" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

API

SelectBox

更多属性请参考 Select。

SelectBox.OptGroup

该属性未实装。

SelectBox.Option

该属性请参考 Select.Option。