React.js中UI不显示placeholder文本问题求助

核心原因 #

你在CreatePost组件里初始化表单state时，给name、prompt设置了带空格的字符串：

const [form, setForm] = useState({
  name: ' ', // 此处为空格，非空字符串
  photo: ' ',
  prompt: ' ',
});

input的value绑定了这个带空格的值，浏览器会判定输入框已有内容（空格也算有效内容），因此不会展示placeholder。这就是控制台能正常打印placeholder，但页面上看不到的关键原因。

修复方案 #

将state初始值改为空字符串：

const [form, setForm] = useState({
  name: '',
  photo: '',
  prompt: '',
});

额外验证项 #

• 确认FormField组件中input的placeholder属性已正确绑定props：你的代码里placeholder={placeholder}写法无误，这部分无需调整。
• 排查CSS是否隐藏了placeholder：检查是否有::placeholder伪元素设置了透明色或其他隐藏样式，从你提供的className来看不存在这类问题。

内容的提问来源于stack exchange，提问作者Krishnadev. V