Form组件之placeholder遇到initialValue

一、前言

        最近项目中，发现了一个奇怪的现象：

               <Input/>组件（ant中的）的placeholder 有时候会显示，有的时候却不显示。

正常情况下，只要  <Input/>组件没有value就会显示placeholder的内容，可这次input明明没有值的呀，这是怎么回事？

二、placeholder遇到initialValue

   2.1问题描述

    项目环境：pro4 (ant组件（3.25.3）+ts+……)；

    组件使用环境：Form表单中使用<Input/>

   产生问题：

       有的时候即使<Input/>组件没有value，也不显示placeholder设置的内容

2.2问题排查

         项目中不害怕出现bug，怕的是这个bug时而出现，时而不出现。怎么办呢？能怎么办，控制台输出对应<Input/>的值呗。然后发现：

   当后端返回的字段为null时，<Input/>的placeholder不显示；而如果是返回的是undefined（空对象，取不到对应的值会是undefined）时，<Input/>的placeholder正常显示。

这就很尴尬了，难道当取不到值时，应该设置为undefined的？于是代码变成如下：

  initialValue: everyRuleDetail.calculateTypeId || undefined,

 然后就解决问题了。

    当然，为了确认，我又将代码改成

  initialValue: everyRuleDetail.calculateTypeId || null

发现，无论何时，placeholder都不生效

2.3问题结论

      在Form组件中，当placeholder遇到initialValue：如果initialValue的值不存在，建议设置为undefined，此时placeholder才能正常发挥作用（当然，如果没有用placeholder，那随意咯）

2.4问题遗留

     为了让结论更准确，我决定去官网试试，结果codeopen打开后，给同一个Form下的两个不同<Input/>组件设置不一样的initialValue（undefined和null），结果placeholder正常显示。这！打脸来的太快，比龙卷风还快！于是，又回到了项目中，试了一下，还是发现当为null时，placeholder不生效，而为undefined时，正常！这……

2.5那先这样好吧

       如果实际开发中遇到placeholder不生效的情况，可以将其对应的nitialValue设置为undefined试试