Unable to input text into text fields or interact with buttons by clicking or hovering in a React form

Question

Unable to input text into text fields or interact with buttons by clicking or hovering in a React form

I am new to React and currently working on a login page that asks for both a username and password. While I haven't implemented much logic yet, I have been exploring online resources to learn more. It appears that I should be able to interact with the text fields by clicking on them or hover over the sign-in button to see some changes.

Currently, I have added CSS for hover effects but I have to manually trigger it using Google DevTools to see any changes. I would greatly appreciate some assistance with this issue. Below is the code snippet:

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>
            );
    }
}

css reactjs hover

Answer 1

Answer №1

Easy sign-in form

class SignIn extends Component {
  state={
    email:'', password:''
  }
  onChange=e=>{
    let val = e.target.value
    this.setState({[e.target.name]:val})
  }
  handleSubmit=e=>{
    e.preventDefault();
    const {email} = this.state;
    alert(email)
  }
  render() {
    console.log(this.state)
    return (
      <form onSubmit={this.handleSubmit}>
       <label>Email</label>
        <input
          className="username"
          name='email'
          type="text"
          placeholder="Enter email"
          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 Styles

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

Easy sign-in form

class SignIn extends Component {
  state={
    email:'', password:''
  }
  onChange=e=>{
    let val = e.target.value
    this.setState({[e.target.name]:val})
  }
  handleSubmit=e=>{
    e.preventDefault();
    const {email} = this.state;
    alert(email)
  }
  render() {
    console.log(this.state)
    return (
      <form onSubmit={this.handleSubmit}>
       <label>Email</label>
        <input
          className="username"
          name='email'
          type="text"
          placeholder="Enter email"
          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 Styles

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 3

Answer №2

How to Add Hover Effect to a Button

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

Alternatively, for the wrapper element:

#buttonWrapper:hover{
  color: red
}

I hope this is helpful!
Check out this sample

Answer 4

How to Add Hover Effect to a Button

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

Alternatively, for the wrapper element:

#buttonWrapper:hover{
  color: red
}

I hope this is helpful!
Check out this sample

Answer 5

Answer №3

It finally clicked for me - I made a silly error on my part. Upon conducting more troubleshooting, I identified that the issue stemmed from the CSS of the container div where the form is placed. I mistakenly assigned a z-index of -1, causing interference.

Answer 6

It finally clicked for me - I made a silly error on my part. Upon conducting more troubleshooting, I identified that the issue stemmed from the CSS of the container div where the form is placed. I mistakenly assigned a z-index of -1, causing interference.

Unable to input text into text fields or interact with buttons by clicking or hovering in a React form

Answer №1

Answer №2

Answer №3

Similar questions

Creating a default option in a Select tag with React when iterating over elements using the map method

When using NextJS <Link, mobile users may need to tap twice to navigate

"Enhancing Collaboration with NextJs Multi-Zones' Unified Header

I need help with customizing the progress bar in HTML and CSS

Setting the useState hook to a User type in React - the ultimate guide!

Continue extending the footer as the screen size decreases

Instructions on obtaining a distinct daily array from the weather API array that provides a detailed 5-day weather report every 3 hours

The background-image property fails to display on a table element

Using the same button to navigate to a different page in react-router-dom and sending data from a form that contains necessary attributes on form.Control

"Enhance your React application with react-router-dom by including parameters in the index URL while also

Issues arise when attempting to use Stylus in conjunction with React

Ways to retrieve headers from server-side rendered (SSR) response in Next.js

Difficulty achieving gradient effect with partial background color change in table-cell

Find all strings in the array that do not begin with a letter from the alphabet

Ensure the placeholder remains front and center, growing in size as it moves vertically

Storing multiple email addresses in an array using an HTML input element

Tips for keeping a dynamic height div in place without affecting surrounding elements

Parent: Using Flexbox vs Child: Choosing between inline-block or inline elements (Advantages of utilizing CSS3 flexbox?)

Having trouble accessing env variables from React Component in Next.js?

Display of certain special characters such as ">" may be affected when using UTF-8 encoding