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#controlled-components

侧面说明：在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-index设置为较低的值。增加z-index可以帮助我。

输入框问题在reactjs中，单击光标时未指向文本框，双击时出现文本输入光标

4 个答案: