在反应形式中，无法在文本字段中键入或单击或悬停在按钮上

Question

我是 React 的新手，正在创建一个登录页面 requires a username and password. 我还没有添加太多逻辑，但从我在网上看到的情况来看，我至少应该 able to click on the text fields 或 able to hover over the sign-in button 并查看一些变化。

我添加了悬停 CSS，我必须在 Google DevTools 中强制触发它才能看到任何变化。希望我能得到一些帮助。代码如下：-

export default class Login extends React.Component {
    render() {
            return (
                    <form>

                            <SmallHeading name="USERNAME:"/>
                            <input className="inputField" type="text" placeholder="Enter username"/>

                            <div className="space"></div>

                            <SmallHeading name="PASSWORD:"/>
                            <input className="inputField" type="text" placeholder="Enter password"/>

                            <div id="buttonWrapper">
                                    <input type="submit" className="btn buttonFont buttonStyle" id="logInButton" value="LOG IN" />
                            </div>
                    </form>
            );
    }
}

Answer 1

简单的登录表单

class Login extends Component {
  state={
    username:'',password:''
  }
  onChange=e=>{
    let val = e.target.value
    this.setState({[e.target.name]:val})
  }
  handleSubmit=e=>{
    e.preventDefault();
    const {username} = this.state;
    alert(username)
  }
  render() {
    console.log(this.state)
    return (
      <form onSubmit={this.handleSubmit}>
       <label>Username</label>
        <input
          className="username"
          name='username'
          type="text"
          placeholder="Enter username"
          onChange={this.onChange}
        />
        <label>Password</label>
        <input
          className="password"
          name='password'
          type="text"
          placeholder="Enter password"
          onChange={this.onChange}
        />
        <div id="buttonWrapper">
          <input
            type="submit"
            className="btn buttonFont buttonStyle"
            id="logInButton"
            value="LOG IN"
          />
        </div>
      </form>
    );
  }
}

css

input[type=text]{ 
        width: 100%; 
        padding: 12px 20px; 
        margin: 8px 0; 
        display: inline-block; 
        border: 1px solid #ccc; 
        box-sizing: border-box; 
    } 
input[type=submit] { 
      background-color: #4CAF50; 
      color: white; 
      padding: 14px 20px; 
      margin: 8px 0; 
      border: none; 
      cursor: pointer; 
      width: 100%; 
  }

Answer 2

向按钮添加悬停

input[type=submit]:hover{
  color: red
}

或包装器

#buttonWrapper:hover{
  color: red
}

希望能有所帮助
sample

Answer 3

我想通了 - 我犯了一个非常愚蠢的错误。进一步调试后，我发现问题出在表单所在的 div 的 CSS 中。我将 z-index 设置为 -1，这是干扰。

在反应形式中，无法在文本字段中键入或单击或悬停在按钮上

In react form, cannot type in text fields or click or hover over button

css

hover

reactjs