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
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
mode | 选择器的展现形式,可选值 box | button | string | |
vertical | 是否垂直显示 | boolean | false |
更多属性请参考 Select。
SelectBox.Option
该属性请参考 Select.Option。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .