本文将使用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 &