在输入框内打字时失去焦点

Question

我一直想弄清楚为什么我的文本输入在通过问题输入一个字符后失去焦点，但我没有找到运气。

这个错误是在我添加一些 CSS 代码后发生的。

这是代码：

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import styled from "styled-components";

const App = () => {
  const [input, setInput] = useState("");
  const [todos, setTodos] = useState([
    { name: "Feed the dog", id: uuidv4() },
    { name: "Help mother", id: uuidv4() },
    { name: "Study", id: uuidv4() },
  ]);

  const StyledList = styled.div`
    justify-content: center;
    text-align: center;
    align-items: center;
    max-width: 40%;
    margin: 8rem auto;
    box-shadow: red;
    min-height: 60vh;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.3);
  `;

  const StyledButtonList = styled.div`
    display: flex;
    justify-content: center;
  `;

  const StyledTodo = styled.div`
    display: flex;
    flex-direction: column;
    width: 30%;
    margin: auto;
  `;

  const StyledButton = styled.button`
    margin-left: 2%;
  `;

  const StyledP = styled.p`
    display: flex;
    justify-content: space-between;
  `;

  const clearAll = () => {
    if (window.confirm("Do you want to delete all?")) {
      setTodos([]);
    }
  };

  const deleteTask = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
    console.log(id);
  };

  return (
    <StyledList>
      <h1>What are the plans for today?</h1>
      <form>
        <input
          type="text"
          placeholder="Add Todo"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        ></input>
        <button
          onClick={(e) => {
            e.preventDefault();
            setTodos([
              ...todos,
              {
                name: input,
                id: uuidv4(),
              },
            ]);
          }}
        >
          Add
        </button>
        <h1>Your todos:</h1>
      </form>
      <StyledTodo>
        {todos.map((todo) => {
          return (
            <StyledP>
              {todo.name}{" "}
              <StyledButtonList>
                <StyledButton onClick={() => deleteTask(todo.id)}>
                  x
                </StyledButton>{" "}
              </StyledButtonList>
            </StyledP>
          );
        })}
      </StyledTodo>
      <button onClick={() => clearAll()}> Remove all </button>
    </StyledList>
  );
};

export default App;

我已经尝试按照一些答案的建议在输入中设置一个键，但我仍然找不到解决这个问题的方法。

非常感谢您的帮助！

Answer 1

使用 styled-components 库，您可能看起来只是添加了一些 CSS，而实际上您声明了几个新的 React 组件。您在使用它们的组件中声明了它们。这意味着，这些样式化的组件在每次渲染时都被重新声明。每次键入一个字符时，App 的状态都会发生变化，React 会重新渲染它，在渲染期间它会重新声明 StyledList，当 React 将您之前拥有的组件树与新组件树进行比较并注意到它是不同的，因为旧 StyledList 与新 StyledList 不同，因此 React 从头开始创建所有内容，新 StyledList 和其中的新输入。而且新的输入没有被聚焦，因为为什么会这样？

TLDR 将所有 const Styled 移动到 App

之外

在输入框内打字时失去焦点

Losing focus while typing inside an input

state

reactjs

react-state