Styled-components break react controlled forms using hooks.有解决办法吗？

Question

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

2019 年 4 月 7 日更新

这是示例代码。第一个字段使用样式组件将 "input" 更改为 "Input"。每次单击时，焦点都会丢失在该字段中。第二个字段没有问题。当然，每次调用 setFirstName() 时都会呈现表单，并且焦点会丢失，如许多其他 Whosebug 答案中所述。但是每次单击后呈现不会影响第二个字段中的焦点。为什么使用样式化组件的字段不能如此？

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 elements（组件实例）； React components，包括那些通过 styled-components 构建的组件，应该在模块范围或高阶组件函数内声明一次。

每次呈现 Form 时，您都在重新创建 Input 组件，因此 React 的协调算法会卸载之前呈现的 <Input /> 并重新装入一个新的。要修复它，请将声明 const Input = styled.input(...); 移到 function Form(...) { ... }.

之外

Styled-components break react controlled forms using hooks.有解决办法吗？

Styled-components break react controlled forms using hooks. Is there a fix?

reactjs

styled-components

react-hooks