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。