样式化组件使用钩子打破反应控制表单.有修复吗?

Question

我用钩子构建了一个受控的表单组件，并使用样式组件而不是样式.css文件。但是，每次我在输入字段中按键时，焦点都会丢失。经过大量调查，我发现通过恢复到样式.css文件并放弃样式组件，一切都按预期工作。这是使用钩子时样式化组件的已知问题吗？

更新 4/7/2019

下面是示例代码。 第一个字段使用样式组件将"输入"更改为"输入"。 每次单击时，该字段中的焦点都会丢失。第二个字段没有问题。 当然，每次调用 setFirstName() 时都会呈现表单，并且焦点会丢失，正如许多其他 StackOverflow 答案中所解释的那样。但每次单击后的渲染不会影响第二个字段中的焦点。为什么对于使用样式化组件的字段不能如此？

import React, { useState } from "react"
import styled from "styled-components"
import "./styles.css"
function Form() {
console.log("Form rendered")
const [firstName, setFirstName] = useState("")
const [lastName, setLastName] = useState("")
const Input = styled.input`
border: 2px solid blue;
margin-right: 15px;
width: 124px;
font-weight: 800;
`
return (
<form>
<Input
value={firstName}
onChange={e => setFirstName(e.target.value)}
placeholder="First name"
type="text"
name="firstName"
/>
<input
value={lastName}
onChange={e => setLastName(e.target.value)}
placeholder="Last name"
type="text"
name="lastName"
/>
</form>
);
}
export default Form

我在CodeSandbox中运行了这段代码，但那是我第一次在那里(学习它)，我不知道如何将其提供给其他人。

Answer 1

渲染时只应创建 React元素(组件的实例);React 组件，包括通过styled-components构建的组件，应该在模块范围或高阶组件函数中声明一次。

每次渲染Form时，您都会重新创建Input组件，因此 React 的协调算法会卸载先前渲染的<Input />并重新挂载一个新组件。若要修复此问题，请将声明const Input = styled.input(...);移至function Form(...) { ... }之外。