在键入时,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 ({ setEmail(event.target.value) }} type="email" /> { setPassword(event.target.value) }} type="password" /> ) } export default Auth
该问题的codesandbox工作示例
问题是您正在函数内部定义Input组件,每次都会创建一个新元素,因此您的新输入失去了焦点。要解决问题,请在功能之外定义组件。
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 ({ setEmail(event.target.value); }} type="email" /> { setPassword(event.target.value); }} type="password" /> ); }; function App() { return (); } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);