时间戳

首页 > 解决方案 > Styled-components 使用钩子打破反应控制的形式。有解决办法吗？

reactjs - Styled-components 使用钩子打破反应控制的形式。有解决办法吗？

问题描述

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

2019 年 4 月 7 日更新

这是示例代码。第一个字段使用样式化组件将“输入”更改为“输入”。每次单击时，焦点都会在该字段中丢失。第二个字段没有问题。当然，每次调用 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 中运行了这段代码，但那是我第一次在那里（学习它），我不知道如何将它提供给其他人。

标签： reactjsstyled-componentsreact-hooks

解决方案

只有 React元素（组件的实例）应该在渲染时创建；React组件，包括那些 via 构建的组件styled-components，应该在模块范围或高阶组件函数内声明一次。

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

推荐阅读