输入类型在使用 useState 时打字时失去焦点答案

【问题标题】：Input Type loses focus while typing while working with useState输入类型在使用 useState 时打字时失去焦点
【发布时间】：2022-12-10 01:53:49
【问题描述】：

当我开始输入一个字符时，输入失去焦点。我看到很多 stackoverflow 答案，但没有一个有效。我也添加了唯一键。代码不起作用的原因是什么。没有状态它工作正常。但是添加state后，input失去了焦点

import React, { useState } from "react";

const Footer = ({ formData }) => {
  const [colorsArray, setColors] = useState(["Red", "Green", "Blue", "Yellow"]);
  const [sizeArray, setSizes] = useState(["S", "M", "L", "XL"]);

  const [sizeInput, setsizeInput] = useState("");

  const colorElementRemoveHandler = (indexToRemove) => {
    const filteredValue = colorsArray.filter((data, index) => {
      return indexToRemove !== index;
    });
    setColors(filteredValue);
  };

  const sizeElementRemoveHandler = (indexToRemove) => {
    const filteredValue = sizeArray.filter((data, index) => {
      return indexToRemove !== index;
    });

    setSizes(filteredValue);
  };

  const addColorHandler = (e) => {
    let input = e.target.value.toLowerCase();
    if (input.length > 2) {
      let temp = colorsArray;
      temp.push(input);
      setColors(temp);
    }
  };
  const addSizeHandler = (e) => {
    let input = e.target.value.toUpperCase();
    if (input.length > 0) {
      let temp = sizeArray;
      temp.push(input);
      setSizes(temp);
      console.log(sizeArray);
    }
  };

  const Test = () => {
    return (
      <input
        type="text"
        onChange={(e) => {
          setsizeInput(e.target.value);
        }}
        value={sizeInput}
      />
    );
  };

  const VariantUI = () => {
    return (
          <div>
            <label>Size</label>
            <input
              id="optionName"
              type="text"
              placeholder="e.g S, M, L, XL"
              onChange={(e) => {
                setsizeInput(e.target.value);
              }}
              value={sizeInput}
            />
          </div>
              <ul>
                {sizeArray.map((data, index) => {
                  return (
                    <li key={index}>
                      {data}
                      <i onClick={() => {sizeElementRemoveHandler(index);}}></i>
                    </li>
                  );
                })}
              </ul
    );
    };

  return (     
        <VariantUI formData={formData} />
   
   );
   };

   export default Footer;


`

提前致谢

【问题讨论】：

标签： javascript reactjs forms react-hooks

【解决方案1】：

const Footer = ({ formData }) => {
  // ..
  const VariantUI = () => {
  // ...
  return (<VariantUI formData={formData} />)
}

您正在创建一个全新类型的组件 (VariantUI)，在渲染页脚的过程中。这将在渲染时发生。每个VariantUi 函数可能与前一个函数具有相同的文本，但它是一个不同的函数，因此要做出反应，它是一种不同类型的组件。由于它是一种不同类型的组件，旧的卸载，新的安装。新挂载的<input>没有焦点。

组件类型必须只定义一次，而不是在渲染时定义。所以VariantUI需要移到页脚之外。由于您目前依赖于闭包变量，因此您需要将它们更改为 props：

const VariantUI = ({
  sizeArray, setSizes, sizeInput, setSizeInput,  // I might have missed a couple props
}) => {
 // ...
}

const Footer = ({ formData }) => {
  // ...
  return (
    <VariantUI
      sizeArray={sizeArray}
      setSizes={setSizes}
      sizeInput={sizeInput}
      setSizeInput={setSizeInput}
    />
  );
}

【讨论】：