❗️你有0条未读消息

ant-design的select组件onSelect事件简析

背景

最近刚入react的坑,前端的布局和控件设计用的是阿里的开源框架:ant-design。ant-design不失为一款好用的设计框架,与bootstrap类似,比bootstrap好看,只是必须结合react使用。跟阿里其他的开源工具类似地,存在一个共同的通病,亦或者可以说是所有国有开源软件的通病:文档写的不够细致。
ant-design也是这样,在官方文档中经常有一些说的不够的地方,让使用者看的莫名所以。最典型的要数针对控件的API的事件参数的说明了,在这上面已经踩了很多的坑。有的是不知道参数传入的意义,有的是参数传递的使用方法说的不够具体等。本篇就一个具体的问题:Select选择器的onSelect事件记录一下踩坑的经历。

问题

我在开发中用到了如下代码片段:

1
2
3
4
5
6
const options = options.map(d => {
return <Option key={d.id}>{d.value}</Option>;
});
<Select onSelect={this.props.onSelect}>
{options}
</Select>

其中key属性是按照react的官方要求,遍历数组元素生成控件时要添加一个唯一的key属性供react的diff算法渲染。
渲染没有问题,在下拉选择的时候onSelect