我渲染了两个组件，每当我在输入字段中输入内容时，输入字段就会失去焦点

Question

这是我的组件渲染到的组件

const BasicInfo=({
product,
  handleChange,
  handleTags,
  productData,
  deleteTags,
  categories,
  customProduct,
  handleCustomChange,
  setCustomProduct,
})=>{
function increasenumber() {
    var hello = numberoffields;
    hello = hello + 1;
    setNumberoffields(hello);
    setCustomProduct((arr) => [...arr, { typeoffield: "", label: "" }]);
  }
const DisplayCustomInput = () => {
    if (product.customCategory.includes(product.category)) {
      return (
        <div>
          <div>
            <button onClick={increasenumber}>Add input field</button>
          </div>
          <DisplayInputs
            numberoffields={numberoffields}
            customProduct={customProduct}
            handleCustomChange={handleCustomChange}
          />
        </div>
      );
    } else {
      return null;
    }
  };

  return (
<DisplayCustomInput />
)
}

我的 DisplayInputs 看起来像

export default function DisplayInputs({
  numberoffields,
  customProduct,
  handleCustomChange,
}) {
const rows = [];
  for (let index = 0; index < numberoffields; index++) {
    console.log(index);
    rows.push(
<div key={index}>
        <label htmlFor="label">
          Enter label for input field for accepting data
        </label>

        <input
          value={customProduct[index] ? customProduct[index].label : ""}
          onChange={handleCustomChange(index, "label")}
          id="label"
        />
</div>
)
}
return rows 
}

每当将一个字符输入输入字段时，它就会失去焦点，如果我使用 DisplayCustomInput 作为 jsx 而不是组件，那么随着字段数的增加，整个页面都会重新加载。

Answer 1

您可以在 React 中使用引用。您在 child 中对她进行初始设置，然后在 parent 中对 useEffect 调用类似 nomRef.current.focus 的东西，useEffect 依赖于输入更改的值。

还有一点：

onChange={() => handleCustomChange(index, "label")}

而不是 onChange={handleCustomChange(index, "label")} （因为没有 () => 你在挂载上执行函数。

如果您需要参考：https://fr.reactjs.org/docs/refs-and-the-dom.html

如果对你有好处，请告诉我

我渲染了两个组件，每当我在输入字段中输入内容时，输入字段就会失去焦点

I have rendered two components and whenever I type something input field input field loses its focus

reactjs

performance

react-hooks

rendering