React中input的placeholder仅开发环境显示 生产构建后不显示怎么办

问题原因 #

1. 属性名拼写错误（核心原因） #

React中input元素的占位符属性正确写法为全小写的placeholder，你代码中使用的placeHolder（大写H）属于非标准DOM属性：

• 开发环境下React开发版本会对非标准属性做容错透传，因此可以正常渲染到DOM上显示占位符
• 生产构建时React会做属性校验优化，所有无法识别的标准DOM属性会被直接过滤，不会出现在最终渲染的HTML标签中，因此占位符消失

2. CSS样式异常 #

你贴出的CSS代码中缺少.generalInput的选择器声明，此外如果没有显式定义placeholder伪元素样式，可能出现以下问题：

• 全局样式将placeholder颜色设置为与input背景色一致，视觉上表现为不显示
• 生产环境CSS压缩合并后，样式优先级发生变化，导致placeholder被设置为opacity:0不可见

解决方案 #

1. 修正属性拼写：将所有placeHolder替换为placeholder，参考代码：

<form>
  <input type="text" placeholder="Digite seu nome" className="generalInput"/>
  <input type="text" placeholder="Digite seu email" className="generalInput"/>
  <input type="text" placeholder="Digite a cotação que gostaria de sugerir" className="generalInput"/>
  <br/><br/>
  <button type="submit" className="sendSuggestionButton">Enviar sugestão</button>
</form>

2. 补充占位符显式样式：主动定义placeholder的样式，避免被全局样式覆盖：

/* 先补全你的generalInput基础样式 */
.generalInput {
  border: 0;
  width: 80%;
  display: inline-block;
  height: 50px;
  text-indent: 20px;
  margin-bottom: 35px;
  border-color: rgb(red, green, blue);
  box-shadow: 0 0 2px #299e29;
}

/* 占位符样式，兼容多浏览器 */
.generalInput::placeholder {
  color: #666;
  opacity: 1;
}
.generalInput::-webkit-input-placeholder {
  color: #666;
  opacity: 1;
}
.generalInput::-moz-placeholder {
  color: #666;
  opacity: 1;
}
.generalInput:-ms-input-placeholder {
  color: #666;
  opacity: 1;
}

.sendSuggestionButton {
  background-color: #4FE84F;
  text-align: center;
  height: 50px;
  width: 200px;
  color: white;
  text-decoration: none;
  border: 0;
  border-radius: 5px;
  transition: 0.3s;
  margin-top: -20px;
}

3. 生产环境验证：部署后打开浏览器开发者工具，检查input元素是否存在placeholder属性：

• 无属性：说明属性拼写修正未生效，重新构建即可
• 有属性但不显示：说明是样式问题，调整样式优先级即可

内容的提问来源于stack exchange，提问作者Victor Atavila