Html 为什么React输入元素嵌套在组件中时会失去焦点？

因此，我有一个连接到React上下文API的输入元素——当元素没有嵌套在组件中时，更新onChange的值是有效的。就在输入下，我呈现了一个返回输入字段的不同组件。此输入字段也连接到上下文API，但输入在更改时失去焦点

我知道我可以添加一个“密钥”甚至一个“id”，但这些解决方案似乎都不起作用

为什么会发生这种情况，最好的解决方法是什么

import React, { useContext } from "react";
import { Context } from "../../context";
import { set_employee_action } from "../../context/actions";

const DashBody = () => {
  const { state, dispatch } = useContext(Context);

  const DashboardBody = () => {
    return (
      <div key={"table"}>
        {/* THIS IS NOT THE ACTUAL PLACE FOR THIS INPUT - BUT THIS IS WHERE IT BREAKS */}
        <div key={"LABEL_TWO"}>
          <label htmlFor={"LABEL_TWO"}>{"LABEL_TWO"}:</label>
          <input
            type="text"
            id={"LABEL_TWO"}
            key={"LABEL_TWO"}
            name={"LABEL_TWO"}
            value={
              state.dash.employee_form["LABEL_TWO"]
                ? state.dash.employee_form["LABEL_TWO"]
                : ""
            }
            onChange={(e) => dispatch(set_employee_action(e))}
          ></input>
        </div>
        {/* THIS IS NOT THE ACTUAL PLACE FOR THIS INPUT - BUT THIS IS WHERE IT BREAKS */}
      </div>
    );
  };

  return (
    <div className="dash_body_container" key={"dash_body_container"}>
      {/* THIS IS NOT THE ACTUAL PLACE FOR THIS INPUT - BUT THIS IS WHERE IT WORKS */}
      <div key={"LABEL_ONE"}>
        <label htmlFor={"LABEL_ONE"}>{"LABEL_ONE"}:</label>
        <input
          type="text"
          id={"LABEL_ONE"}
          key={"LABEL_ONE"}
          name={"LABEL_ONE"}
          value={
            state.dash.employee_form["LABEL_ONE"]
              ? state.dash.employee_form["LABEL_ONE"]
              : ""
          }
          onChange={(e) => dispatch(set_employee_action(e))}
        ></input>
      </div>
      {/* THIS IS NOT THE ACTUAL PLACE FOR THIS INPUT - BUT THIS IS WHERE IT WORKS */}
      <DashboardBody></DashboardBody>
    </div>
  );
};

export default DashBody;

import React，{useContext}来自“React”；
从“./../Context”导入{Context}”；
从“./../context/actions”导入{set_employee_action}；
常量DashBody=（）=>{
const{state，dispatch}=useContext（上下文）；
常量仪表板体=（）=>{
返回(
{/*这不是此输入的实际位置-但它在此处中断*/}
{“LABEL_TWO”}：
调度（设置员工操作（e））}
>
{/*这不是此输入的实际位置-但它在此处中断*/}
);
};
返回(
{/*这不是此输入的实际位置-但这是它工作的地方*/}
{“LABEL_ONE”}：
调度（设置员工操作（e））}
>
{/*这不是此输入的实际位置-但这是它工作的地方*/}
);
};
导出默认DashBody；

每次呈现

仪表板主体时，您似乎都在重新定义
仪表板主体
组件。您正在失去
DashBody
输入中的焦点，因为您正在使用
DashBody
中的
dispatch
，因此每次调用
dispatch
时，
DashBody
组件都会重新呈现，并呈现不同的
DashBody
组件。您可以提取
DashboardBody
并在
DashBody
外部定义它，但请确保在
DashboardBody
中使用
useContext（Context）
：

const仪表板主体=（）=>{
const{state，dispatch}=useContext（Context）；//确保您有自己的分派方法
返回(
{/*这不是此输入的实际位置-但它在此处中断*/}
{“LABEL_TWO”}：
调度（设置员工操作（e））}
>
{/*这不是此输入的实际位置-但它在此处中断*/}
);
};
您是否尝试在
仪表板主体
外部定义
仪表板主体
组件，以便在每次渲染
仪表板主体
时不会重新定义它？@JakubKosiński它可以工作！太好了！