React

React

react不适应,妹子UI可否出一个Vue.js版本?

binary 回复了问题 • 7 人关注 • 6 个回复 • 4445 次浏览 • 2017-11-10 23:41 • 来自相关话题

react版本报错

回复

匿名用户 发起了问题 • 1 人关注 • 0 个回复 • 49 次浏览 • 2017-11-03 20:12 • 来自相关话题

对a标签中包含的复选按钮添加事件,阻止默认跳转事件失效

kid 回复了问题 • 2 人关注 • 3 个回复 • 245 次浏览 • 2017-06-08 22:06 • 来自相关话题

基于amazeui-react的组件Selected封装的联动选择(支持多选)

kid 发表了文章 • 3 个评论 • 510 次浏览 • 2017-03-04 16:08 • 来自相关话题

使用amazeui-react做项目的时候,项目有个需求,需要进行城市和其它许多类型的联动选择,并且还要能多选,官方提供的组件Selected不能满足我的需求,于是我就基于Selected组件自己再封装了一层,使用效果还不错,希望能帮到大家。组件源码(code):组件属性(props):layer: 选择层数,默认为1层,最多支持3层(如:省市区)。data: (必须)选项数据,格式和官方组件Selected一样。placeholder: 输入提示文字。类型为数组,如[0, 1, 2],分别表示3层联动选择时每层下拉框的默认提示文字。onChange: 选择改变时回调函数。defaultValue: 默认值。multiple: 多选。width: 下拉列表宽度。separator: 分隔符,用于多层联动选择时分隔每层数据。默认为"-"。className: 组件className。函数(function):getValue: 获取下拉框当前选择的value值,类型为字符串,多选时每个字符串用","隔开。getLabel: 同getLabel,但获取的是当前选项的标签。希望能帮助到有需要的人,如有问题请留言或邮件。作者(author):Name: kidEmail: kid_lau@qq.com 使用amazeui-react做项目的时候,项目有个需求,需要进行城市和其它许多类型的联动选择,并且还要能多选,官方提供的组件Selected不能满足我的需求,于是我就基于Selected组件自己再封装了一层,使用效果还不错,希望能帮到大家。组件源码(code):"use strict"; import React, {Component, PropTypes} from "react"; import {Selected, Close, Badge} from "amazeui-react"; export default class Select extends Component { /* * 构造函数。 * @param props 只读属性 */ constructor(props) { super(props); let data = []; for (let i = 0; i < this.props.layer; i++) { data.push(i === 0 ? [].concat(this.props.data) : []); } this.state = { data: data, value: ["","",""], list: [], } } /* * 获取选中值。 * @return string 选中值 */ getValue() { let value = this.state.list.map((x, i) => { return x.value; }); return value.toString(); } /* * 获取选中标签名。 * @return string 标签名 */ getLabel() { let value = this.state.list.map((x, i) => { return x.label; }); return value.toString(); } /* * 通过value获取子级数据。 * @param array data 数据 * @param string value 选中值 * @return array 子级数据 */ getChildrenByValue(data, value) { let children = []; for (let i in data) { if (data[i].value === value) { children = data[i].children != false ? data[i].children : []; break; } } return children; } /* * 通过value获取标签。 * @param array data 选项数据 * @param string value 选中值 * @return string 标签 */ getLabelByValue(data = [], value) { let label = ""; for (let i = 0; i < data.length; i++) { if (data[i].value === value) { label = data[i].label; break; } } return label; } /* * 设置默认值。 */ setDefaultValue() { let value = this.state.value; let data = this.state.data; let list = ((!this.props.defaultValue) || (this.props.defaultValue === "undefined")) ? [] : this.props.defaultValue.split(","); list = list.map((x, i) => { let separator = this.props.separator; let part = x.split(separator); let label = ""; for (let i = 0; i < part.length; i++) { value[i] = part[i]; let text = this.getLabelByValue(data[i], part[i]); label += i === 0 ? text : (separator + text); if ((i + 1) < part.length) { data[i + 1] = this.getChildrenByValue(data[i], part[i]); } } return { value: x, label: label, }; }); this.setState({ value: value, data: data, list: list, }); } /* * 删除列表项。 * @param int index 序号 */ deleteListItem(index) { let list = this.state.list; list.splice(index, 1); this.props.onChange(list); this.setState({ list: list, }); } /* * 检查列表项是否存在。 * @param item 列表项 * @return 存在返回true,不存在返回false。 */ isExisted(item) { let list = this.state.list; for (let i = 0; i < list.length; i++) { if (list[i].value === item.value) { return true; } } return false; } /* * 选择改变时。 * @param string value 选中值 */ handleChangeFile(index) { let layer = this.props.layer; let list = this.state.list; let multiple = this.props.multiple; if (layer === (index + 1)) { let item = { value: "", label: "", }; let separator = this.props.separator; for (let i = 0; i < layer; i++) { let value = this.refs["select" + i].getValue(); item.value += i === 0 ? value : (separator + value); let label = this.getLabelByValue(this.state.data[i], value); item.label += i === 0 ? label : (separator + label); } if (!this.isExisted(item)) { list = multiple ? list.concat([item]) : [item]; } this.props.onChange(item); this.setState({ list: list, }); } else { let value = this.refs["select" + index].getValue(); let data = this.state.data; for (let i = index; i < (layer - 1); i++) { data[i + 1] = i === index ? this.getChildrenByValue(data[i], value) : []; } this.setState({ data: data, list: multiple ? list : [], }); } } /* * 第一次渲染后。 */ componentDidMount() { this.setDefaultValue(); } /* * 渲染。 */ render() { let selects = []; for (let i = 0; i < this.props.layer; i++) { selects.push( <Selected key={i} data={this.state.data[i]} placeholder={this.props.placeholder[i]} onChange={value => { this.handleChangeFile(i); }} searchBox ref={"select" + i} maxHeight={300} value={this.state.value[i]} btnWidth={this.props.width} /> ); } let list = !this.props.multiple ? "" : this.state.list.map((x, i) => { return ( <Badge key={i} radius className="am-margin-vertical-xs am-margin-right-xs" > {this.state.list[i].label} <Close spin onClick={e => { e.preventDefault(); this.deleteListItem(i); }} /> </Badge> ); }); return ( <div className={this.props.className ? (this.props.className + " am-inline-block") : "am-inline-block"} style={{ maxWidth: 600 }} > {selects} <div>{list}</div> </div> ); } } Select.propTypes = { layer: PropTypes.oneOf([1,2,3]), data: PropTypes.array.isRequired, placeholder: PropTypes.array, onChange: PropTypes.func, defaultValue: PropTypes.string, multiple: PropTypes.bool, width: PropTypes.number, separator: PropTypes.string, className: PropTypes.string, }; Select.defaultProps = { layer: 1, onChange: value => {}, placeholder: [], separator: "-", };组件属性(props):layer: 选择层数,默认为1层,最多支持3层(如:省市区)。data: (必须)选项数据,格式和官方组件Selected一样。placeholder: 输入提示文字。类型为数组,如[0, 1, 2],分别表示3层联动选择时每层下拉框的默认提示文字。onChange: 选择改变时回调函数。defaultValue: 默认值。multiple: 多选。width: 下拉列表宽度。separator: 分隔符,用于多层联动选择时分隔每层数据。默认为"-"。className: 组件className。函数(function):getValue: 获取下拉框当前选择的value值,类型为字符串,多选时每个字符串用","隔开。getLabel: 同getLabel,但获取的是当前选项的标签。 希望能帮助到有需要的人,如有问题请留言或邮件。 作者(author):Name: kidEmail: kid_lau@qq.com 
[ 查看全部 ]
<p>使用amazeui-react做项目的时候,项目有个需求,需要进行城市和其它许多类型的联动选择,并且还要能多选,官方提供的组件Selected不能满足我的需求,于是我就基于Selected组件自己再封装了一层,使用效果还不错,希望能帮到大家。</p><p><strong>组件源码(code):</strong></p><pre><code class="language-javascript">"use strict";

import React, {Component, PropTypes} from "react";
import {Selected, Close, Badge} from "amazeui-react";

export default class Select extends Component {
/*
* 构造函数。
* @param props 只读属性
*/
constructor(props) {
super(props);

let data = [];
for (let i = 0; i &lt; this.props.layer; i++) {
data.push(i === 0 ? [].concat(this.props.data) : []);
}

this.state = {
data: data,
value: ["","",""],
list: [],
}
}

/*
* 获取选中值。
* @return string 选中值
*/
getValue() {
let value = this.state.list.map((x, i) =&gt; {
return x.value;
});

return value.toString();
}

/*
* 获取选中标签名。
* @return string 标签名
*/
getLabel() {
let value = this.state.list.map((x, i) =&gt; {
return x.label;
});

return value.toString();
}

/*
* 通过value获取子级数据。
* @param array data 数据
* @param string value 选中值
* @return array 子级数据
*/
getChildrenByValue(data, value) {
let children = [];
for (let i in data) {
if (data[i].value === value) {
children = data[i].children != false ? data[i].children : [];
break;
}
}

return children;
}

/*
* 通过value获取标签。
* @param array data 选项数据
* @param string value 选中值
* @return string 标签
*/
getLabelByValue(data = [], value) {
let label = "";
for (let i = 0; i &lt; data.length; i++) {
if (data[i].value === value) {
label = data[i].label;
break;
}
}

return label;
}

/*
* 设置默认值。
*/
setDefaultValue() {
let value = this.state.value;
let data = this.state.data;
let list = ((!this.props.defaultValue) ||
(this.props.defaultValue === "undefined")) ?
[] : this.props.defaultValue.split(",");
list = list.map((x, i) =&gt; {
let separator = this.props.separator;
let part = x.split(separator);
let label = "";
for (let i = 0; i &lt; part.length; i++) {
value[i] = part[i];
let text = this.getLabelByValue(data[i], part[i]);
label += i === 0 ? text : (separator + text);
if ((i + 1) &lt; part.length) {
data[i + 1] = this.getChildrenByValue(data[i], part[i]);
}
}
return {
value: x,
label: label,
};
});

this.setState({
value: value,
data: data,
list: list,
});
}

/*
* 删除列表项。
* @param int index 序号
*/
deleteListItem(index) {
let list = this.state.list;
list.splice(index, 1);
this.props.onChange(list);
this.setState({
list: list,
});
}

/*
* 检查列表项是否存在。
* @param item 列表项
* @return 存在返回true,不存在返回false。
*/
isExisted(item) {
let list = this.state.list;
for (let i = 0; i &lt; list.length; i++) {
if (list[i].value === item.value) {
return true;
}
}

return false;
}

/*
* 选择改变时。
* @param string value 选中值
*/
handleChangeFile(index) {
let layer = this.props.layer;
let list = this.state.list;
let multiple = this.props.multiple;

if (layer === (index + 1)) {
let item = {
value: "",
label: "",
};
let separator = this.props.separator;
for (let i = 0; i &lt; layer; i++) {
let value = this.refs["select" + i].getValue();
item.value += i === 0 ? value : (separator + value);
let label = this.getLabelByValue(this.state.data[i], value);
item.label += i === 0 ? label : (separator + label);
}
if (!this.isExisted(item)) {
list = multiple ? list.concat([item]) : [item];
}
this.props.onChange(item);
this.setState({
list: list,
});
} else {
let value = this.refs["select" + index].getValue();
let data = this.state.data;
for (let i = index; i &lt; (layer - 1); i++) {
data[i + 1] = i === index ? this.getChildrenByValue(data[i], value) : [];
}
this.setState({
data: data,
list: multiple ? list : [],
});
}
}

/*
* 第一次渲染后。
*/
componentDidMount() {
this.setDefaultValue();
}

/*
* 渲染。
*/
render() {
let selects = [];
for (let i = 0; i &lt; this.props.layer; i++) {
selects.push(
&lt;Selected
key={i}
data={this.state.data[i]}
placeholder={this.props.placeholder[i]}
onChange={value =&gt; {
this.handleChangeFile(i);
}}
searchBox
ref={"select" + i}
maxHeight={300}
value={this.state.value[i]}
btnWidth={this.props.width}
/&gt;
);
}

let list = !this.props.multiple ? "" : this.state.list.map((x, i) =&gt; {
return (
&lt;Badge
key={i}
radius
className="am-margin-vertical-xs am-margin-right-xs"
&gt;
{this.state.list[i].label}
&lt;Close
spin
onClick={e =&gt; {
e.preventDefault();
this.deleteListItem(i);
}}
/&gt;
&lt;/Badge&gt;
);
});

return (
&lt;div
className={this.props.className ? (this.props.className + " am-inline-block") : "am-inline-block"}
style={{
maxWidth: 600
}}
&gt;
{selects}
&lt;div&gt;{list}&lt;/div&gt;
&lt;/div&gt;
);
}
}

Select.propTypes = {
layer: PropTypes.oneOf([1,2,3]),
data: PropTypes.array.isRequired,
placeholder: PropTypes.array,
onChange: PropTypes.func,
defaultValue: PropTypes.string,
multiple: PropTypes.bool,
width: PropTypes.number,
separator: PropTypes.string,
className: PropTypes.string,
};
Select.defaultProps = {
layer: 1,
onChange: value =&gt; {},
placeholder: [],
separator: "-",
};</code></pre><p><strong>组件属性(props):</strong></p><ul><li>layer: 选择层数,默认为1层,最多支持3层(如:省市区)。</li><li>data: (必须)选项数据,格式和官方组件Selected一样。</li><li>placeholder: 输入提示文字。类型为数组,如[0, 1, 2],分别表示3层联动选择时每层下拉框的默认提示文字。</li><li>onChange: 选择改变时回调函数。</li><li>defaultValue: 默认值。</li><li>multiple: 多选。</li><li>width: 下拉列表宽度。</li><li>separator: 分隔符,用于多层联动选择时分隔每层数据。默认为&quot;-&quot;。</li><li>className: 组件className。</li></ul><p><strong>函数(function):</strong></p><ul><li>getValue: 获取下拉框当前选择的value值,类型为字符串,多选时每个字符串用&quot;,&quot;隔开。</li><li>getLabel: 同getLabel,但获取的是当前选项的标签。</li></ul><p>&nbsp;</p><p>希望能帮助到有需要的人,如有问题请留言或邮件。</p><p>&nbsp;</p><p><strong>作者(author):</strong></p><p>Name: kid</p><p>Email: kid_lau@qq.com</p><p>&nbsp;</p>

有适配微信小程序的计划吗

linjun1185 回复了问题 • 5 人关注 • 3 个回复 • 807 次浏览 • 2016-09-26 15:47 • 来自相关话题

如何在jquery版支持flex布局

zhoufengyu 回复了问题 • 3 人关注 • 1 个回复 • 482 次浏览 • 2016-09-18 22:47 • 来自相关话题

amazeui-react examples 报错

Amaze UI 小无 回复了问题 • 3 人关注 • 1 个回复 • 687 次浏览 • 2016-08-29 10:12 • 来自相关话题

amzeui touch图标字体定制问题.

Amaze UI 小无 回复了问题 • 3 人关注 • 2 个回复 • 656 次浏览 • 2016-08-23 12:15 • 来自相关话题

ie8下什么都没有 我们的所有数据都是接口取的 在ie下数据就获取不到

夕风色 回复了问题 • 4 人关注 • 3 个回复 • 596 次浏览 • 2016-08-12 12:45 • 来自相关话题

React Router和Menu组件的问题

Amaze UI 小无 回复了问题 • 2 人关注 • 1 个回复 • 779 次浏览 • 2016-07-22 14:22 • 来自相关话题

Amaze UI Touch Tabs BUG 大大的BUG

Amaze UI 小无 回复了问题 • 3 人关注 • 2 个回复 • 877 次浏览 • 2016-07-22 11:21 • 来自相关话题

Cannot find module "amazeui-touch" 这什么原因引起的呢!

夕风色 回复了问题 • 3 人关注 • 2 个回复 • 616 次浏览 • 2016-07-18 16:45 • 来自相关话题

react不适应,妹子UI可否出一个Vue.js版本?

回复

binary 回复了问题 • 7 人关注 • 6 个回复 • 4445 次浏览 • 2017-11-10 23:41 • 来自相关话题

react版本报错

回复

匿名用户 发起了问题 • 1 人关注 • 0 个回复 • 49 次浏览 • 2017-11-03 20:12 • 来自相关话题

对a标签中包含的复选按钮添加事件,阻止默认跳转事件失效

回复

kid 回复了问题 • 2 人关注 • 3 个回复 • 245 次浏览 • 2017-06-08 22:06 • 来自相关话题

有适配微信小程序的计划吗

回复

linjun1185 回复了问题 • 5 人关注 • 3 个回复 • 807 次浏览 • 2016-09-26 15:47 • 来自相关话题

如何在jquery版支持flex布局

回复

zhoufengyu 回复了问题 • 3 人关注 • 1 个回复 • 482 次浏览 • 2016-09-18 22:47 • 来自相关话题

amazeui-react examples 报错

回复

Amaze UI 小无 回复了问题 • 3 人关注 • 1 个回复 • 687 次浏览 • 2016-08-29 10:12 • 来自相关话题

amzeui touch图标字体定制问题.

回复

Amaze UI 小无 回复了问题 • 3 人关注 • 2 个回复 • 656 次浏览 • 2016-08-23 12:15 • 来自相关话题

ie8下什么都没有 我们的所有数据都是接口取的 在ie下数据就获取不到

回复

夕风色 回复了问题 • 4 人关注 • 3 个回复 • 596 次浏览 • 2016-08-12 12:45 • 来自相关话题

React Router和Menu组件的问题

回复

Amaze UI 小无 回复了问题 • 2 人关注 • 1 个回复 • 779 次浏览 • 2016-07-22 14:22 • 来自相关话题

Amaze UI Touch Tabs BUG 大大的BUG

回复

Amaze UI 小无 回复了问题 • 3 人关注 • 2 个回复 • 877 次浏览 • 2016-07-22 11:21 • 来自相关话题

Cannot find module "amazeui-touch" 这什么原因引起的呢!

回复

夕风色 回复了问题 • 3 人关注 • 2 个回复 • 616 次浏览 • 2016-07-18 16:45 • 来自相关话题

amamzeui-react图片怎么使用相对路径

回复

tihumihu 回复了问题 • 2 人关注 • 2 个回复 • 764 次浏览 • 2016-07-08 11:53 • 来自相关话题

基于amazeui-react的组件Selected封装的联动选择(支持多选)

kid 发表了文章 • 3 个评论 • 510 次浏览 • 2017-03-04 16:08 • 来自相关话题

使用amazeui-react做项目的时候,项目有个需求,需要进行城市和其它许多类型的联动选择,并且还要能多选,官方提供的组件Selected不能满足我的需求,于是我就基于Selected组件自己再封装了一层,使用效果还不错,希望能帮到大家。组件源码(code):组件属性(props):layer: 选择层数,默认为1层,最多支持3层(如:省市区)。data: (必须)选项数据,格式和官方组件Selected一样。placeholder: 输入提示文字。类型为数组,如[0, 1, 2],分别表示3层联动选择时每层下拉框的默认提示文字。onChange: 选择改变时回调函数。defaultValue: 默认值。multiple: 多选。width: 下拉列表宽度。separator: 分隔符,用于多层联动选择时分隔每层数据。默认为"-"。className: 组件className。函数(function):getValue: 获取下拉框当前选择的value值,类型为字符串,多选时每个字符串用","隔开。getLabel: 同getLabel,但获取的是当前选项的标签。希望能帮助到有需要的人,如有问题请留言或邮件。作者(author):Name: kidEmail: kid_lau@qq.com 使用amazeui-react做项目的时候,项目有个需求,需要进行城市和其它许多类型的联动选择,并且还要能多选,官方提供的组件Selected不能满足我的需求,于是我就基于Selected组件自己再封装了一层,使用效果还不错,希望能帮到大家。组件源码(code):"use strict"; import React, {Component, PropTypes} from "react"; import {Selected, Close, Badge} from "amazeui-react"; export default class Select extends Component { /* * 构造函数。 * @param props 只读属性 */ constructor(props) { super(props); let data = []; for (let i = 0; i < this.props.layer; i++) { data.push(i === 0 ? [].concat(this.props.data) : []); } this.state = { data: data, value: ["","",""], list: [], } } /* * 获取选中值。 * @return string 选中值 */ getValue() { let value = this.state.list.map((x, i) => { return x.value; }); return value.toString(); } /* * 获取选中标签名。 * @return string 标签名 */ getLabel() { let value = this.state.list.map((x, i) => { return x.label; }); return value.toString(); } /* * 通过value获取子级数据。 * @param array data 数据 * @param string value 选中值 * @return array 子级数据 */ getChildrenByValue(data, value) { let children = []; for (let i in data) { if (data[i].value === value) { children = data[i].children != false ? data[i].children : []; break; } } return children; } /* * 通过value获取标签。 * @param array data 选项数据 * @param string value 选中值 * @return string 标签 */ getLabelByValue(data = [], value) { let label = ""; for (let i = 0; i < data.length; i++) { if (data[i].value === value) { label = data[i].label; break; } } return label; } /* * 设置默认值。 */ setDefaultValue() { let value = this.state.value; let data = this.state.data; let list = ((!this.props.defaultValue) || (this.props.defaultValue === "undefined")) ? [] : this.props.defaultValue.split(","); list = list.map((x, i) => { let separator = this.props.separator; let part = x.split(separator); let label = ""; for (let i = 0; i < part.length; i++) { value[i] = part[i]; let text = this.getLabelByValue(data[i], part[i]); label += i === 0 ? text : (separator + text); if ((i + 1) < part.length) { data[i + 1] = this.getChildrenByValue(data[i], part[i]); } } return { value: x, label: label, }; }); this.setState({ value: value, data: data, list: list, }); } /* * 删除列表项。 * @param int index 序号 */ deleteListItem(index) { let list = this.state.list; list.splice(index, 1); this.props.onChange(list); this.setState({ list: list, }); } /* * 检查列表项是否存在。 * @param item 列表项 * @return 存在返回true,不存在返回false。 */ isExisted(item) { let list = this.state.list; for (let i = 0; i < list.length; i++) { if (list[i].value === item.value) { return true; } } return false; } /* * 选择改变时。 * @param string value 选中值 */ handleChangeFile(index) { let layer = this.props.layer; let list = this.state.list; let multiple = this.props.multiple; if (layer === (index + 1)) { let item = { value: "", label: "", }; let separator = this.props.separator; for (let i = 0; i < layer; i++) { let value = this.refs["select" + i].getValue(); item.value += i === 0 ? value : (separator + value); let label = this.getLabelByValue(this.state.data[i], value); item.label += i === 0 ? label : (separator + label); } if (!this.isExisted(item)) { list = multiple ? list.concat([item]) : [item]; } this.props.onChange(item); this.setState({ list: list, }); } else { let value = this.refs["select" + index].getValue(); let data = this.state.data; for (let i = index; i < (layer - 1); i++) { data[i + 1] = i === index ? this.getChildrenByValue(data[i], value) : []; } this.setState({ data: data, list: multiple ? list : [], }); } } /* * 第一次渲染后。 */ componentDidMount() { this.setDefaultValue(); } /* * 渲染。 */ render() { let selects = []; for (let i = 0; i < this.props.layer; i++) { selects.push( <Selected key={i} data={this.state.data[i]} placeholder={this.props.placeholder[i]} onChange={value => { this.handleChangeFile(i); }} searchBox ref={"select" + i} maxHeight={300} value={this.state.value[i]} btnWidth={this.props.width} /> ); } let list = !this.props.multiple ? "" : this.state.list.map((x, i) => { return ( <Badge key={i} radius className="am-margin-vertical-xs am-margin-right-xs" > {this.state.list[i].label} <Close spin onClick={e => { e.preventDefault(); this.deleteListItem(i); }} /> </Badge> ); }); return ( <div className={this.props.className ? (this.props.className + " am-inline-block") : "am-inline-block"} style={{ maxWidth: 600 }} > {selects} <div>{list}</div> </div> ); } } Select.propTypes = { layer: PropTypes.oneOf([1,2,3]), data: PropTypes.array.isRequired, placeholder: PropTypes.array, onChange: PropTypes.func, defaultValue: PropTypes.string, multiple: PropTypes.bool, width: PropTypes.number, separator: PropTypes.string, className: PropTypes.string, }; Select.defaultProps = { layer: 1, onChange: value => {}, placeholder: [], separator: "-", };组件属性(props):layer: 选择层数,默认为1层,最多支持3层(如:省市区)。data: (必须)选项数据,格式和官方组件Selected一样。placeholder: 输入提示文字。类型为数组,如[0, 1, 2],分别表示3层联动选择时每层下拉框的默认提示文字。onChange: 选择改变时回调函数。defaultValue: 默认值。multiple: 多选。width: 下拉列表宽度。separator: 分隔符,用于多层联动选择时分隔每层数据。默认为"-"。className: 组件className。函数(function):getValue: 获取下拉框当前选择的value值,类型为字符串,多选时每个字符串用","隔开。getLabel: 同getLabel,但获取的是当前选项的标签。 希望能帮助到有需要的人,如有问题请留言或邮件。 作者(author):Name: kidEmail: kid_lau@qq.com 
[ 查看全部 ]
<p>使用amazeui-react做项目的时候,项目有个需求,需要进行城市和其它许多类型的联动选择,并且还要能多选,官方提供的组件Selected不能满足我的需求,于是我就基于Selected组件自己再封装了一层,使用效果还不错,希望能帮到大家。</p><p><strong>组件源码(code):</strong></p><pre><code class="language-javascript">"use strict";

import React, {Component, PropTypes} from "react";
import {Selected, Close, Badge} from "amazeui-react";

export default class Select extends Component {
/*
* 构造函数。
* @param props 只读属性
*/
constructor(props) {
super(props);

let data = [];
for (let i = 0; i &lt; this.props.layer; i++) {
data.push(i === 0 ? [].concat(this.props.data) : []);
}

this.state = {
data: data,
value: ["","",""],
list: [],
}
}

/*
* 获取选中值。
* @return string 选中值
*/
getValue() {
let value = this.state.list.map((x, i) =&gt; {
return x.value;
});

return value.toString();
}

/*
* 获取选中标签名。
* @return string 标签名
*/
getLabel() {
let value = this.state.list.map((x, i) =&gt; {
return x.label;
});

return value.toString();
}

/*
* 通过value获取子级数据。
* @param array data 数据
* @param string value 选中值
* @return array 子级数据
*/
getChildrenByValue(data, value) {
let children = [];
for (let i in data) {
if (data[i].value === value) {
children = data[i].children != false ? data[i].children : [];
break;
}
}

return children;
}

/*
* 通过value获取标签。
* @param array data 选项数据
* @param string value 选中值
* @return string 标签
*/
getLabelByValue(data = [], value) {
let label = "";
for (let i = 0; i &lt; data.length; i++) {
if (data[i].value === value) {
label = data[i].label;
break;
}
}

return label;
}

/*
* 设置默认值。
*/
setDefaultValue() {
let value = this.state.value;
let data = this.state.data;
let list = ((!this.props.defaultValue) ||
(this.props.defaultValue === "undefined")) ?
[] : this.props.defaultValue.split(",");
list = list.map((x, i) =&gt; {
let separator = this.props.separator;
let part = x.split(separator);
let label = "";
for (let i = 0; i &lt; part.length; i++) {
value[i] = part[i];
let text = this.getLabelByValue(data[i], part[i]);
label += i === 0 ? text : (separator + text);
if ((i + 1) &lt; part.length) {
data[i + 1] = this.getChildrenByValue(data[i], part[i]);
}
}
return {
value: x,
label: label,
};
});

this.setState({
value: value,
data: data,
list: list,
});
}

/*
* 删除列表项。
* @param int index 序号
*/
deleteListItem(index) {
let list = this.state.list;
list.splice(index, 1);
this.props.onChange(list);
this.setState({
list: list,
});
}

/*
* 检查列表项是否存在。
* @param item 列表项
* @return 存在返回true,不存在返回false。
*/
isExisted(item) {
let list = this.state.list;
for (let i = 0; i &lt; list.length; i++) {
if (list[i].value === item.value) {
return true;
}
}

return false;
}

/*
* 选择改变时。
* @param string value 选中值
*/
handleChangeFile(index) {
let layer = this.props.layer;
let list = this.state.list;
let multiple = this.props.multiple;

if (layer === (index + 1)) {
let item = {
value: "",
label: "",
};
let separator = this.props.separator;
for (let i = 0; i &lt; layer; i++) {
let value = this.refs["select" + i].getValue();
item.value += i === 0 ? value : (separator + value);
let label = this.getLabelByValue(this.state.data[i], value);
item.label += i === 0 ? label : (separator + label);
}
if (!this.isExisted(item)) {
list = multiple ? list.concat([item]) : [item];
}
this.props.onChange(item);
this.setState({
list: list,
});
} else {
let value = this.refs["select" + index].getValue();
let data = this.state.data;
for (let i = index; i &lt; (layer - 1); i++) {
data[i + 1] = i === index ? this.getChildrenByValue(data[i], value) : [];
}
this.setState({
data: data,
list: multiple ? list : [],
});
}
}

/*
* 第一次渲染后。
*/
componentDidMount() {
this.setDefaultValue();
}

/*
* 渲染。
*/
render() {
let selects = [];
for (let i = 0; i &lt; this.props.layer; i++) {
selects.push(
&lt;Selected
key={i}
data={this.state.data[i]}
placeholder={this.props.placeholder[i]}
onChange={value =&gt; {
this.handleChangeFile(i);
}}
searchBox
ref={"select" + i}
maxHeight={300}
value={this.state.value[i]}
btnWidth={this.props.width}
/&gt;
);
}

let list = !this.props.multiple ? "" : this.state.list.map((x, i) =&gt; {
return (
&lt;Badge
key={i}
radius
className="am-margin-vertical-xs am-margin-right-xs"
&gt;
{this.state.list[i].label}
&lt;Close
spin
onClick={e =&gt; {
e.preventDefault();
this.deleteListItem(i);
}}
/&gt;
&lt;/Badge&gt;
);
});

return (
&lt;div
className={this.props.className ? (this.props.className + " am-inline-block") : "am-inline-block"}
style={{
maxWidth: 600
}}
&gt;
{selects}
&lt;div&gt;{list}&lt;/div&gt;
&lt;/div&gt;
);
}
}

Select.propTypes = {
layer: PropTypes.oneOf([1,2,3]),
data: PropTypes.array.isRequired,
placeholder: PropTypes.array,
onChange: PropTypes.func,
defaultValue: PropTypes.string,
multiple: PropTypes.bool,
width: PropTypes.number,
separator: PropTypes.string,
className: PropTypes.string,
};
Select.defaultProps = {
layer: 1,
onChange: value =&gt; {},
placeholder: [],
separator: "-",
};</code></pre><p><strong>组件属性(props):</strong></p><ul><li>layer: 选择层数,默认为1层,最多支持3层(如:省市区)。</li><li>data: (必须)选项数据,格式和官方组件Selected一样。</li><li>placeholder: 输入提示文字。类型为数组,如[0, 1, 2],分别表示3层联动选择时每层下拉框的默认提示文字。</li><li>onChange: 选择改变时回调函数。</li><li>defaultValue: 默认值。</li><li>multiple: 多选。</li><li>width: 下拉列表宽度。</li><li>separator: 分隔符,用于多层联动选择时分隔每层数据。默认为&quot;-&quot;。</li><li>className: 组件className。</li></ul><p><strong>函数(function):</strong></p><ul><li>getValue: 获取下拉框当前选择的value值,类型为字符串,多选时每个字符串用&quot;,&quot;隔开。</li><li>getLabel: 同getLabel,但获取的是当前选项的标签。</li></ul><p>&nbsp;</p><p>希望能帮助到有需要的人,如有问题请留言或邮件。</p><p>&nbsp;</p><p><strong>作者(author):</strong></p><p>Name: kid</p><p>Email: kid_lau@qq.com</p><p>&nbsp;</p>
Amaze UI React:基于 React.js 开发的 Web 组件库。
http://amazeui.org/react/