之前一直用的 antd 的 Select 组件，但在有些端并不适用，而原生的 select 样式修改不灵活，遂产生自己写一个组件的想法。观察 select 组件：
<select onChange={(value) => {this.value=value}}
<option value=’1′>man</option>
<option value=’0′>woman</option>
</select>
可以看出数据都是在 option 中，有值 value 和显示出来的数据一一对应。如果我们写一个 select 组件，那么应该有 onChange 方法，应该要访问到子元素，而且 div 是没有 value 这个属性的，所以 option 应该也是一个组件，有 value 属性。下面是我写的组件的用法：
import {MobileSelect, MobileOption} from ‘../../components/MobileSelect’;
<MobileSelect
disabled={isDisabled}
value={data.clarity || ringResponse.clarity || ‘Flawless’}
style={{width: ‘132px’}}
onChange={(v) => this.changeDataValue(‘clarity’, v)}
>
{
(clarity || []).map((item, i) => {
return (
<MobileOption key={i + ”} value={item.code}>{item.title}</MobileOption>
);
})
}
</MobileSelect>
可以看出其和一般的 select 组件用法差不多。效果如下：
下面是组件
import {observable} from ‘mobx’;
import {observer} from ‘mobx-react’;
import React from ‘react’;
import {Icon} from ‘antd’;
import ‘./index.less’;
interface IProps {
disabled?: boolean;
onChange?: (value) => void;
value?: string | number;
style?: React.CSSProperties;
className?: string;
}
@observer
export class MobileSelect extends React.Component<IProps> {
@observable showOption = false; // 是否弹出下拉框
@observable value: any = ”; // 当前选中的 value 值
@observable text: any = ”; // 选中的 value 值对应的文本
@observable cell: any; // 组件的 dom 节点
componentDidMount(): void {
// 获取选择框的 ref，当在组件外点击时的时候收起下拉框
document.addEventListener(‘click’, (e) => {
if (this.cell && this.cell !== e.target && !this.cell.contains(e.target)) {
this.showOption = false;
}
}, true);
}
componentWillReceiveProps(nextProps: Readonly<IProps>, nextContext: any): void {
// 根据传入的 value 值，遍历 children，找到对应值的展示文本
if (nextProps.value !== this.props.value || nextProps.children !== this.props.children) {
React.Children.map(this.props.children, (child, index) => {
if (nextProps.value === child.props.value) {
this.text = child.props.children;
}
});
}
}
render(): React.ReactNode {
const {children, value} = this.props;
console.log(value);
return (
<div
className={‘Mobile-Select ‘ + this.props.className}
style={this.props.style}
ref={(node) => this.cell = node}
>
<div
className={‘select-wrap’}
onClick={() => {
// 禁用不能弹出下拉框
if (!this.props.disabled) {
this.showOption = !this.showOption;
}
}}
>
<Icon type=’down’ style={this.showOption ? {transform: ‘rotate(180deg)’} : {transform: ‘rotate(0deg)’}} className={‘select-icon’}/>
{this.text}
</div>
<div className={‘option-wrap’} style={this.showOption ? {position: ‘absolute’} : {display: ‘none’}}>
{
React.Children.map(children, (child, index) => {
// 设置选中 option 和未选中 option 的样式
let optionClassName = ”;
if (this.props.value === child.props.value) {
optionClassName = child.props.className ? child.props.className + ‘ option-item selected’ : ‘option-item selected’;
} else {
optionClassName = child.props.className + ‘ option-item’;
}
return (
<div
onClick={() => { // 为了在父组件给子组件添加 onClick 事件，包裹了一层 div
// 有无 onChange 事件都能改变值
if (this.props.value && this.props.onChange) {
this.props.onChange(child.props.value);
} else {
this.text = child.props.children;
this.value = child.props.value;
}
console.log(this.value);
this.showOption = !this.showOption;
}}
style={this.props.style}
className={optionClassName}
>{child}</div>
);
})
}
</div>
</div>
);
}
}
interface OptionProps {
value?: string | number;
className?: string;
style?: React.CSSProperties;
}
export class MobileOption extends React.Component<OptionProps> {
render(): React.ReactNode {
const {children} = this.props;
return (
<div style={this.props.style}>
{children}
</div>
);
}
}
下面是组件的样式
.Mobile-Select {
display: inline-block;
min-width: 100px;
margin: 0 6px;
.select-wrap {
border: 1px solid #e0c0a2;
border-radius: 4px;
padding: 5px 11px;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
.select-icon {
transition: .3s;
float: right;
}
}
.option-wrap {
box-shadow: 0 0 5px #333;
z-index: 1000;
border-radius: 5px;
.option-item {
background-color: #fff;
padding: 2px 11px;
min-width: 100px;
&.selected {
background-color: #fbe6d0;
}
}
}
}
总的来说只实现了 select 的基本功能。有改进的地方请指点一二。