时间戳

首页 > 解决方案 > 输入的占位符值未显示在部署到 Vercel 的 React 项目中，包括 netlify

javascript - 输入的占位符值未显示在部署到 Vercel 的 React 项目中，包括 netlify

问题描述

我正在使用 React hook-forms 库来处理我的表单值和输入数据的验证。占位符显示在开发服务器上，它是本地主机，但在部署时，占位符不会显示，看起来好像没有如何理解应该在字段中输入的内容。

import { useForm } from "react-hook-form";


function Contact(){
   const {
    register,
    handleSubmit,
    formState: { errors },
    trigger,
    reset,
    setFocus,
  } = useForm();

  useEffect(() => {
    setFocus("name");
  }, []);

return (
       <form className="forminformation" onSubmit={handleSubmit(onSubmit)}>
              <aside
                data-aos="fade-left"
                data-aos-delay="500"
                className="form-inputs"
              >
                <input
                  placeholder="Full Name"
                  type="text"
                  autoComplete="new-name"
                  {...register("name", { required: "can't be empty" })}
                  onKeyUp={() => trigger("name")}
                />
                {errors.name && (
                  <p className="error-Info ">
                    <em>{errors.name.message}</em>
                    <img src={ErrorIcon} alt="ErrorIcon" />
                  </p>
                )}
              </aside
</form>
)
}

占位符正在本地主机上工作，但 vercel 或 netify 都没有显示它

下面的本地主机图像在 此处输入图像描述

vercel 在此处输入图片描述

标签： javascriptreactjsreact-hook-form

解决方案

后来我发现代码出了什么问题，而占位符值没有在生产中显示。我正在按照 figma 文件来设计网站。所以我在我的代码中有这个，这是 figma 通常用于他们的文件以及导致问题的原因

opacity:50%;

所以我没有使用上述内容，而是将我的 css 文件更改为

opacity:.5;

这对我有用。

推荐阅读