Reactjs React在键入时不聚焦输入字段

React在键入时拒绝将焦点放在输入字段上

我曾试图修复它，但没有成功。我不理解这种行为

这是一个组件：

import React, { useState } from 'react'
import styled from 'styled-components'

const Auth = () => {
    const Form = styled.form``
    const InputGroup = styled.div``
    const Input = styled.input``
    const Button = styled.button``

    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    return (
        <Form>
            <InputGroup>
                <Input
                    value={email}
                    onChange={event => {
                        setEmail(event.target.value)
                    }}
                    type="email"
                />
            </InputGroup>
            <InputGroup>
                <Input
                    value={password}
                    onChange={event => {
                        setPassword(event.target.value)
                    }}
                    type="password"
                />
            </InputGroup>
            <Button />
        </Form>
    )
}

export default Auth

import React，{useState}来自“React”
从“样式化组件”导入样式化
常量Auth=（）=>{
const Form=styled.Form``
const InputGroup=styled.div``
常量输入=styled.Input``
const Button=styled.Button``
const[email，setEmail]=useState（“”）
const[password，setPassword]=useState（“”）
返回(
{
setEmail（event.target.value）
}}
type=“电子邮件”
/>
{
设置密码（event.target.value）
}}
type=“密码”
/>
)
}
导出默认身份验证

---

问题在于，您在函数中定义的输入组件每次都会创建新元素，因此您的新输入失去了焦点。 要解决此问题，请在功能外定义组件

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import styled from "styled-components";

const Form = styled.form``;
const InputGroup = styled.div``;
const Input = styled.input``;
const Button = styled.button``;

const Auth = () => {

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <Form>
      <InputGroup>
        <Input
          value={email}
          onChange={event => {
            setEmail(event.target.value);
          }}
          type="email"
        />
      </InputGroup>
      <InputGroup>
        <Input
          value={password}
          onChange={event => {
            setPassword(event.target.value);
          }}
          type="password"
        />
      </InputGroup>
      <Button>press me</Button>
    </Form>
  );
};

function App() {
  return (
    <div className="App">
      <Auth />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
从“样式化组件”导入样式化；
const Form=styled.Form``；
const InputGroup=styled.div``；
const Input=styled.Input`；
const Button=样式化。按钮``；
常量Auth=（）=>{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
返回(
{
setEmail（event.target.value）；
}}
type=“电子邮件”
/>
{
设置密码（event.target.value）；
}}
type=“密码”
/>
按我
);
};
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您失去了焦点，因为该元素已卸载，而一个新元素正在重新安装。这很简单。