键入时保持占位符可见

Question

我正在使用 React 并尝试构建一个网站，让您可以分析您的 twitter 泡沫。所以，我有一个表单，您可以在其中搜索 Twitter 用户名。因此，我在此表单中添加了一个“@”作为占位符，当您开始输入时它会消失。我的目标是“@”在您开始输入时保持不变，例如我可以输入“potus44”并以这种形式显示“@potus44”（我希望这是有道理的）。所以最后，“@”不会消失，而是留在推特句柄前面。

查看我当前表单的屏幕截图：Screenshot

这是我的表单的代码。

import React, { Component } from 'react'; 
import { FiTwitter } from "react-icons/fi";

const app = {
    options: []
};

const onFormSubmit = (e) => {
    e.preventDefault();

    const option = e.target.elements.option.value;

    if (option) {
        app.options.push(option);
        e.target.elements.option.value = '';
    }
}

class Homepage extends Component {
    render () {
        return (
            <div className="homepage">
                <div className="container-pagecontent">
                <main style={{marginTop: '150px'}}>
                <h1 id="home" >Analyse your bubble! <FiTwitter size=".8em" /></h1>
                <p>Search for your bubble.</p>
                <form onSubmit={onFormSubmit}>
                    <input placeholder="@" className ="input" type="text" name="option"/>
                    <button className="button">Suchen</button>
                </form>
                </main>
                </div>
            </div>
        )
    }
}

export default Homepage

这是我的 scss（以防它对你有用）。

.button {
    background-color: #1763A5;
    font-family: bergen;
    color: white;
    border: 2px solid #1763A5;
    padding: 6px;
    font-size: 18px;
    border-radius: 6px;
    margin-left: 10px;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    outline: none;
}

.button:hover {
    background-color: white;
    color: #1763A5;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.input {
    width: 150px;
}

input[type=text] {
    width: 170px;
    padding: 7px 10px;
    margin: 12px 0;
    margin-right: 2px; 
    box-sizing: border-box;
    border: 2px solid #1763A5;
    border-radius: 6px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    outline: none;
  }

以及“容器页面内容”的代码：

.container-pagecontent {
    max-width: 95rem;
    margin: 0 auto;
    padding: 0 $m-size;
    width: 100%;
    text-align: center;
}

提前感谢您的帮助。如果您需要对该项目的更多见解，请告诉我。

Answer 1

好的。 在styles.scss::

.homepage {
  h1::before { 
      display: block; 
      content: " "; 
      margin-top: -150px; 
      height: 130px; 
      visibility: hidden; 
      pointer-events: none;
    }
  height: 110vh;
  background-color: white; 
  padding-left: 40px;
  padding-right: 40px;
}

@font-face {
  src: url(/fonts/BergenText-Regular.otf);
  font-family: bergen;
}

.button {
  background-color: #1763A5;
  font-family: bergen;
  color: white;
  border: 2px solid #1763A5;
  padding: 6px;
  font-size: 18px;
  border-radius: 6px;
  margin-left: 10px;
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  outline: none;
}

.button:hover {
  background-color: white;
  color: #1763A5;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}


.placeholder{
  position: relative;
}

.placeholder::after{
  content: attr(data-placeholder);
  position: absolute;
  left:0.325rem;
  top:33%;
}


input[type=text] {
  width: 170px;
  padding: 7px 0 7px 20px;
  margin: 12px 0;
  margin-right: 2px; 
  box-sizing: border-box;
  border: 2px solid #1763A5;
  border-radius: 6px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  outline: none;
}

在 App.js::

import React, { Component } from "react";
import "./styles.scss";

const app = {
  options: []
};

const onFormSubmit = (e) => {
  e.preventDefault();

  const option = e.target.elements.option.value;

  if (option) {
    app.options.push(option);
    e.target.elements.option.value = "";
  }
};

class Homepage extends Component {
  render() {
    return (
      <div className="homepage">
        <div className="container-pagecontent">
          <main style={{ marginTop: "150px" }}>
            <h1 id="home">Analyse your bubble!</h1>
            <p>Search for your bubble.</p>
            <form onSubmit={onFormSubmit}>
              <div className="placeholder" data-placeholder="@">
                <input
                  className="input"
                  type="text"
                  name="option"
                />
              </div>
              <button className="button">Suchen</button>
            </form>
          </main>
        </div>
      </div>
    );
  }
}

export default Homepage;