Question

我用钩子构建了一个受控表单组件，并使用样式组件而不是styles.css文件。但是，每次我在输入字段中按一下键时，都会失去焦点。经过大量调查，我发现通过恢复到styles.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构建的组件，应在模块作用域或高级组件函数中声明一次。

您每次渲染Input时都会重新创建Form组件，因此React的对帐算法会卸载先前渲染的<Input />并重新安装一个新组件。要解决此问题，请将声明const Input = styled.input(...);从function Form(...) { ... }中移出。

样式化的组件使用钩子来破坏反应受控形式。有修复程序吗？

1 个答案: