SelectBox 选择框

平铺选项表单控件。

何时使用

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

代码演示

基本使用

基本使用。

SelectBox选择框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { SelectBox, Button, Row, Col } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[basic new]', value, '[basic old]', oldValue);
  6. }
  7. const { Option } = SelectBox;
  8. class App extends React.Component {
  9. state = {
  10. visible: true,
  11. };
  12. handleClick = () => this.setState({ visible: !this.state.visible });
  13. render() {
  14. return (
  15. <Row gutter={10}>
  16. <Col span={8}>
  17. <SelectBox onChange={handleChange}>
  18. <Option value="jack">Jack</Option>
  19. <Option value="lucy">Lucy</Option>
  20. {this.state.visible && (
  21. <Option value="wu" disabled>
  22. Wu
  23. </Option>
  24. )}

受控按钮选择框

受控按钮选择框。

SelectBox选择框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { SelectBox } from 'choerodon-ui/pro';
  4. const { Option } = SelectBox;
  5. class App extends React.Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. value: 'wu',
  10. };
  11. }
  12. handleChange = (value, oldValue) => {
  13. console.log('[constrolled]', 'newValue', value, '[oldValue]', oldValue);
  14. this.setState({
  15. value,
  16. });
  17. }
  18. render() {
  19. return (
  20. <SelectBox value={this.state.value} onChange={this.handleChange}>
  21. <Option value="jack">Jack</Option>
  22. <Option value="lucy">Lucy</Option>
  23. <Option value="wu">Wu</Option>
  24. </SelectBox>
  25. );
  26. }
  27. }

绑定数据源

绑定数据源。

SelectBox选择框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, SelectBox, Row, Col, Form } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log(
  6. '[dataset newValue]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. '[record.get(name)]',
  11. record.get(name),
  12. );
  13. console.log(record.toJSONData());
  14. }
  15. const { Option } = SelectBox;
  16. const optionData = [
  17. { text: 'Jack', value: 'jack' },
  18. { text: 'Zhangsan', value: 'zhangsan' },
  19. { text: 'Lucy', value: 'lucy' },
  20. { text: 'Niu', value: 'jiaqin' },
  21. { text: 'Shao', value: 'shao' },
  22. ];
  23. const data = [
  24. {
  25. 'first-name': 'zhangsan',
  26. 'last-name': 'wu',
  27. },
  28. ];

值列表代码

值列表代码。

SelectBox选择框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, SelectBox, Button, Row, Col } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log(
  6. '[dataset newValue]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. `[record.get('${name}')]`,
  11. record.get(name),
  12. );
  13. }
  14. function handleOption({ record }) {
  15. return {
  16. disabled: record.index === 0,
  17. };
  18. }
  19. class App extends React.Component {
  20. flag = false;
  21. ds = new DataSet({
  22. autoCreate: true,
  23. fields: [
  24. {
  25. name: 'sex',
  26. type: 'string',
  27. lookupCode: 'HR.EMPLOYEE_GENDER',
  28. defaultValue: 'F',
  29. },
  30. {
  31. name: 'sex2',

多选

通过属性multiple设置多选。

SelectBox选择框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, SelectBox, Row, Col } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[multiple]', value, '[oldValue]', oldValue);
  6. }
  7. function handleDataSetChange({ record, name, value, oldValue }) {
  8. console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  9. }
  10. const { Option } = SelectBox;
  11. const data = [{
  12. user: ['wu'],
  13. }];
  14. class App extends React.Component {
  15. ds = new DataSet({
  16. data,
  17. fields: [
  18. { name: 'user', type: 'string', textField: 'text', label: '用户', multiple: true },
  19. ],
  20. events: {
  21. update: handleDataSetChange,
  22. },
  23. });

按钮视图

按钮视图。

SelectBox选择框 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { SelectBox, Row, Col } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[button new]', value, '[button old]', oldValue);
  6. }
  7. const { Option } = SelectBox;
  8. ReactDOM.render(
  9. <Row gutter={10}>
  10. <Col span={12}>
  11. <SelectBox mode="button" onChange={handleChange}>
  12. <Option value="jack">Jack</Option>
  13. <Option value="lucy">Lucy</Option>
  14. <Option value="wu">Wu</Option>
  15. </SelectBox>
  16. </Col>
  17. <Col span={12}>
  18. <SelectBox mode="button" multiple onChange={handleChange}>
  19. <Option value="jack">Jack</Option>
  20. <Option value="lucy">Lucy</Option>
  21. <Option value="wu">Wu</Option>
  22. </SelectBox>
  23. </Col>
  24. </Row>,
  25. document.getElementById('container'),
  26. );

垂直排列

垂直排列。

SelectBox选择框 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { SelectBox, Row, Col } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[button new]', value, '[button old]', oldValue);
  6. }
  7. const { Option } = SelectBox;
  8. ReactDOM.render(
  9. <Row gutter={10}>
  10. <Col span={2}>
  11. <h3>single</h3>
  12. </Col>
  13. <Col span={2}>
  14. <SelectBox vertical mode="button" onChange={handleChange}>
  15. <Option value="jack">Jack</Option>
  16. <Option value="lucy">Lucy</Option>
  17. <Option value="wu">Wu</Option>
  18. </SelectBox>
  19. </Col>
  20. <Col span={2}>
  21. <h3>multiple</h3>
  22. </Col>
  23. <Col span={2}>
  24. <SelectBox vertical mode="button" multiple onChange={handleChange}>
  25. <Option value="jack">Jack</Option>
  26. <Option value="lucy">Lucy</Option>
  27. <Option value="wu">Wu</Option>
  28. </SelectBox>
  29. </Col>
  30. </Row>,
  31. document.getElementById('container'),

只读

只读。

SelectBox选择框 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, SelectBox, Row, Col } from 'choerodon-ui/pro';
  4. const { Option } = SelectBox;
  5. const optionData = [
  6. { text: 'Jack', value: 'jack' },
  7. { text: 'Zhangsan', value: 'zhangsan' },
  8. { text: 'Lucy', value: 'lucy' },
  9. { text: 'Niu', value: 'jiaqin' },
  10. { text: 'Shao', value: 'shao' },
  11. ];
  12. const data = [
  13. {
  14. name: 'zhangsan',
  15. },
  16. ];
  17. class App extends React.Component {
  18. optionDs = new DataSet({
  19. data: optionData,
  20. selection: 'single',
  21. });
  22. ds = new DataSet({
  23. data,
  24. fields: [
  25. {
  26. name: 'name',

过滤

通过属性 optionsFilter 过滤选项。

SelectBox选择框 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, SelectBox, Button } from 'choerodon-ui/pro';
  4. const { Option } = SelectBox;
  5. const data = [
  6. {
  7. 'last-name': 'zhangsan',
  8. },
  9. ];
  10. class App extends React.Component {
  11. state = {
  12. key: 'a',
  13. };
  14. ds = new DataSet({
  15. data,
  16. fields: [{ name: 'last-name', type: 'string', label: '姓' }],
  17. });
  18. handleClick = () => {
  19. this.setState({ key: this.state.key === 'a' ? 'c' : 'a' });
  20. };
  21. optionsFilter = (record) => {
  22. const { key } = this.state;
  23. return record.get('meaning').toLowerCase().indexOf(key) !== -1;
  24. };
  25. render() {
  26. return (
  27. <div>

optionRenderer 输入属性

通过属性 optionRenderer 自定义选项。

SelectBox选择框 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, SelectBox, Tooltip, Icon } from 'choerodon-ui/pro';
  4. const App = () => {
  5. const optionDs = new DataSet({
  6. selection: 'single',
  7. queryUrl: '/dataset/user/queries',
  8. autoQuery: true,
  9. });
  10. const ds = new DataSet({
  11. fields: [
  12. {
  13. name: 'user',
  14. type: 'string',
  15. textField: 'name',
  16. valueField: 'userid',
  17. label: '用户',
  18. options: optionDs,
  19. },
  20. ],
  21. });
  22. const optionRenderer = ({ text }) => (
  23. <Tooltip title={text} placement="left">
  24. <span style={{ display: 'inline-block' }}>
  25. {text && <Icon type="people" />} {text}
  26. </span>
  27. </Tooltip>
  28. );
  29. return <SelectBox dataSet={ds} name="user" optionRenderer={optionRenderer} />;
  30. };
  31. ReactDOM.render(<App />, document.getElementById('container'));

可搜索

可搜索。

SelectBox选择框 - 图11

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, SelectBox, Form, Row, Col } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log(
  6. '[searchable]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. `[record.get('${name}')]`,
  11. record.get(name),
  12. );
  13. }
  14. const { Option } = SelectBox;
  15. const data = [
  16. {
  17. 'last-name': 'zhangsan',
  18. },
  19. ];
  20. function searchMatcher({ record, text }) {
  21. return record.get('value').indexOf(text) !== -1;
  22. }
  23. class App extends React.Component {
  24. ds = new DataSet({
  25. data,
  26. fields: [
  27. { name: 'last-name', type: 'string' },
  28. { name: 'first-name', type: 'string' },
  29. { name: 'sex', type: 'string', lookupCode: 'HR.EMPLOYEE_GENDER' },
  30. ],

API

SelectBox

参数说明类型默认值
mode选择器的展现形式,可选值 box | buttonstring
vertical是否垂直显示booleanfalse

更多属性请参考 Select

SelectBox.Option

该属性请参考 Select.Option