占位符文本未显示在 React.js 的 UI 中答案

【问题标题】：Placeholder text not showing in UI on React.js占位符文本未显示在 React.js 的 UI 中
【发布时间】：2023-01-26 13:39:59
【问题描述】：

我将占位符文本作为道具从 <CreatePost/> 传递给 <FormField/>。我需要在表单中显示占位符文本，但它没有显示，但是当我在 <FormField/> 中的 console.log 占位符文本显示在 console 中时没有错误，但不在 input 标记中。

将道具从<CreatePost/>传递给<FormField/>

function CreatePost() {
  const navigate = useNavigate();
  const [form, setForm] = useState({
    name: ' ',
    photo: ' ',
    prompt: ' ',
  });
  const [generatingImg, setGeneratingImg] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = () => {};

  const handleChange = e => {};

  const handleSurpriseMe = () => {};

  return (
    <section className='max-w-7xl mx-auto'>
      
      <form className='mt-16 max-w-3xl' onSubmit={handleSubmit}>
        <div className='flex flex-col gap-5'>
          <FormField
            LabelName='Your name'
            type='text'
            name='name'
            placeholder='John Doe'
            value={form.name}
            handleChange={handleChange}
          />
          <FormField
            LabelName='Prompt'
            type='text'
            name='prompt'
            placeholder='Spongebob Squarepants in the Blair Witch Project'
            value={form.prompt}
            isSurpriseMe
            handleChange={handleChange}
            defaultValue='Initial value'
            handleSurpriseMe={handleSurpriseMe}
          />
        </div>
      </form>
    </section>
  );
}

表单字段.jsx

function FormField({
  LabelName,
  type,
  name,
  placeholder,
  value,
  handleChange,
  isSurpriseMe,
  handleSurpriseMe,
}) {
  console.log(placeholder);
  return (
    <div>
      <div className='flex items-center mb-2 gap-2'>
        <label
          htmlFor={name}
          className='block text-sm font-medium text-gray-900'
        >
          {LabelName}
        </label>
        {isSurpriseMe && (
          <button
            className='font-semibold py-1 px-2 text-xs bg-[#ECECF1] hover:bg-[#d7d7e7] rounded-[5px] text-black'
            type='button'
            onClick={handleSurpriseMe}
          >
            Surprise me
          </button>
        )}
      </div>
      <input
        type={type}
        id={name}
        name={name}
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
        required
        className='bg-gray-50 border border-gray-300 
        text-gray-900 text-sm rounded-lg focus:ring-[#4649ff]
        focus:border-[#4649ff] ouline-none block w-full p-3
        '
      />
    </div>
  );
}

结果显示在console.log

John Doe
VM256 installHook.js:1861 John Doe
FormField.jsx:13 Spongebob Squarepants in the Blair Witch Project
VM256 installHook.js:1861 Spongebob Squarepants in the Blair Witch Project

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当您在 HTML 输入字段中按空格键时，占位符会消失。

所以同样的事情也发生在上面的案例中。您将初始值设置为带空格的字符串而不是空字符串。将状态设置为空字符串将完成您的工作

const [form, setForm] = useState({
    name: '', // this is an empty string
    photo: ' ',// this is a string with a space
    prompt: ' ',
});

【讨论】：

谢谢。有用
别客气！