使用Ant Design的select組件時placeholder不生效/不起做用的解決辦法

先來講說使用Ant Design和Element-ui的感受吧。

公司的項目開發中用的是vue+element-ui，使用了一通下來後，以爲element-ui雖然也有一些問題或坑，但這些小問題或坑憑着本身的能力還都能解決掉，使用起來也很絲滑柔順。

而據說Ant Design和React更配哦，可是也說一下使用Ant Design的感受吧，首先我的以爲Ant Design給的demo有點亂七八糟，多是React自己js和DOM混在一塊兒跟人的感受就不夠清爽吧，以下圖：

下圖是element-ui一目瞭然的demo：

其次，Ant Design的有些坑，會令你防不勝防，並且很詭異，好比它的select組件，設置了placeholder時也設置了value綁定一個state默認的空值，這時placeholder卻不生效，固然會有人說你設置了value綁定一個state默認的空值，placeholder固然不起做用了，可空值原本就是false，原本就是不存在的值，有不存在的值時，placeholder才能發揮它原本的做用。再者若是不這樣設置，那如何重置清空select的值，固然也還會有人說可使用提供的this.props.form.resetFields()來重置，結果是我用了這玩意兒，可這玩意兒也不起做用啊，難道是我使用的姿式不對嗎？以下圖：

從圖中能夠看出，點擊重置按鈕，onClick事件中也使用了this.props.form.resetFields()，可select組件卻沒有被重置，右側的控制檯中打印的是this.props的值，很明顯是有form.resetFields這個方法的，但就是沒有起做用，因此我設置了value綁定一個state默認的空值，才能夠實現重置select組件，由此也就出現了上邊描述的問題。

因而我就上網查了一下資料，有人給出瞭解決的辦法，以下：

當select的value綁定一個state默認值時，若是默認值是''或null時，placeholder不生效
解決方案：默認值設爲undefined

這你去哪兒說理去，奇葩嗎？詭異嗎？難道真的是個人用法有問題？我也不知道，期待有高手能解答個人疑問，不勝感激！

目前，還在學習React和Ant Design中，可能還會遇到其餘的一些問題，但我一直秉持着神擋殺神、佛擋殺佛的精神來解決問題，相信廣大前端er也是跟我同樣，一塊兒加油！

本文參考：http://www.javashuo.com/article/p-kygjyvzf-ex.html