文本不会显示在文本输入中

Question

我完成了一个文本字段的创建，人们将在其中输入他们的 email，当该字段为空时会收到错误消息，我决定对其进行测试。 但是当我尝试在文本框中输入时，它什么也没有出现。 相反，当我单击它时，这个黑色边框会出现在输入字段周围。

我在 Stackoverflow 上发现了其他人遇到的类似问题，但其中的一些答案没有帮助，例如在我的输入 CSS 上添加 z-index: 1000 或删除边框或填充。 我什至尝试移动发送按钮，认为它以某种方式阻止了文本字段，但效果不佳

这是有问题的代码

Javascript代码

constructor(props) {
    super(props);
    this.state = {
      input: "",
    };
  }
  onSubmit = (event) => {
    event.preventDefault()
     if (this.state.input.length != 1) {
       return document.getElementById('error').innerHTML="No email found"
     }
  }
  render() {
    return(
      <section className = "image-banner">                   
          <div className = "text-1">
              COMING SOON
          </div>
          <div className = "text-2">
              The Dessa MiniPhone 2 
          </div>
          <div className = "text-3">
              Type your Email below to recieve further updates
          </div>
          <input value = {this.state.input} />
          <button onClick= {this.onSubmit}>Send</button>
          <p id="error"></p>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"></link>
      </section>
      
    )
  }

CSS代码

input {
  position: relative;
  left: 44vh;
  padding-right: 30vh;
  line-height: 20px;
  border-radius: 19px;
  border-width: 1px;
  top: 3vh;
  z-index: 1 1000;
}

button {
  position: relative;
  left: 38vh;
  border-radius: 0vh 7vh 7vh 0;
  color: black;
  line-height: 20px;
  border-width: 1px;
  top: 3vh;
}

Answer 1

您正在使用 state ( state.input ) 作为受控输入来设置输入值，并且您没有设置 onChange 方法，因此您的输入始终为空字符串。

Answer 2

您必须将 onChange 处理程序添加到输入元素并在用户键入时更新 state。

<input value = {this.state.input} onChange={(e) => this.setState({ input: e.target.value })} />