React基本组件之DropDown

本文将使用react来实现一个简单的DropDown组件。

组件的html和css部分不再多说，大家应该都可以搞定，主要来讲一讲组件的内部行为。比如状态的变化，数据的传递处理等等。

组件github地址：https://github.com/oliver0910/React-Component

组件效果图

参数

value: 当前选中的值

list: 数据对象(支持字符串数组和键值对对象)

onChange: 选项选择后的回调事件

代码分析

参数解析

let list = this.props.list || [];
//如果list是key-value形式的数据，则自动转换成[{name:'',value:''}]格式
if (typeof list === 'object' && !Array.isArray(list)) {
list = Object.keys(list).map(key=>({
name: list[key],
value: key
}));
}
//如果list是字符串数组
list = list.map(o=>typeof o === 'string' ? {name:o, value: o} : o);

首先从props中获取到用户传入的list对象，然后根据list的类型进行对应的格式转换，主要是为了统一数据结构，以便于之后的使用。

这里的语法大多都是es6语法，如果不了解可以先去学习一下。

状态处理

mousedownOut(e){
for(var node = e.target;node;node = node.parentNode)
if(this.refs.me == node) return;
this.shrink();
},

shrink() {
this.setState({open: false});
removeEventListener("mousedown", this.mousedownOut);
},

toggle() {
!this.state.open && addEventListener("mousedown", this.mousedownOut);
this.setState({open: !this.state.open});
},

select(value) {
if (this.state.value !== value) {
this.shrink();
this.setState({value},()=>this.props.onChange && this.props.onChange(value));
}
}

select函数用于处理用户点击选项的事件。

toggle函数用于控制组件中list元素的展示和隐藏。

shrink函数用于隐藏list元素并绑定mousedown事件，这里重点说一下，绑定mousedown函数是为了处理在list展示的情况下，点击页面其他区域后，隐藏list。

mousedownOut中遍历了当前发生点击事件的所有父级元素，如果找到了组件的容器，则说明事件发生在组件内容，这种情况不作处理。否则，隐藏list。