輸入框問題在reactjs中，單擊光標時未指向文本框，雙擊時出現文本輸入光標

Question

我對此很陌生。 下面是代碼，請幫助

單擊時，輸入光標未指向文本框中，雙擊時，輸入光標即將出現。 另外，如果我要添加占位符，則無法輸入任何內容。

   export default class Login extends Component {
  state = {
    UserID: "",
    Password: ""
  };
  UserIdchangeHandler = text => {
    this.setState({
      UserID: text.target.value
    });
  };
  PasswordchangeHandler = text => {
    this.setState({
      Password: text.target.value
    });
  };
  render() {
    return (
      <div className="backgroundImg">
        <span>
          <FontAwesomeIcon icon={faUserTie} size="lg" />
        </span>
        <input
          type="text"
          onChange={text => {
            this.UserIdchangeHandler(text);
          }}
        />
        <br />
        <span>
          <FontAwesomeIcon icon={faKey} size="lg" />
        </span>
        <input
          type="password"
          onChange={text => {
            this.UserIdchangeHandler(text);
          }}
        />
        <br />
        <button>Login</button>
      </div>
    );
  }
}

Answer 1

import React, {Component} from 'react';
import "./login.css";

import { library, text } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {  faUserTie, faKey, } from '@fortawesome/free-solid-svg-icons'

library.add(faUserTie)

 export default class Login extends Component{

    state={
        UserID:"",
        Password:""
      }
    UserIdchangeHandler=(text)=>{
        this.setState({
            UserID:text.target.value
        })
    }
    PasswordchangeHandler=(pass)=>{
        this.setState({
            Password:pass.target.value
        })
    }
    render() {
        return (

 <div className="backgroundImg">
      <span>
<FontAwesomeIcon icon={faUserTie} size="lg"></FontAwesomeIcon>
      </span>
    <input type="text" onChange={(text)=>{this.UserIdchangeHandler(text)}} ></input>
    <br/>
    <span>
<FontAwesomeIcon icon={faKey} size="lg"></FontAwesomeIcon>
    </span>
    <input type="password" onChange={(pass)=>{this.PasswordchangeHandler(pass)}}></input>
    <br/>
    <button>Login</button>
    </div>         

        );
    }
}

Answer 2

發生的情況是您具有onChange處理程序，但未在輸入中設置值。

如果添加onChange處理程序，則需要添加值prop

    <input
      type="text"
      value={this.stateUserId}  // You're missing this here
      onChange={evt => {
        this.UserIdchangeHandler(evt);
      }}
    />

您可以在此處了解有關React Docs的更多信息。 在您的情況下，您嘗試創建受控輸入 https://reactjs.org/docs/forms.html# 受控組件

旁注：在onChange中，您標記了屬性text 。 但最好將其稱為event

Answer 3

<input
    type="text"
    value={this.state.UserID}  // you are missing value here.
    onChange={text => {
                        this.UserIdchangeHandler(text);
                      }
             }
/>

與密碼輸入字段相同。

Answer 4

問題現在解決了。 問題出在班級的CSS上。 Z索引設置為較低的值。增加Z索引對我有幫助。