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

【问题标题】：Why does a React input element lose focus when nested within a component?为什么 React 输入元素嵌套在组件中时会失去焦点？
【发布时间】：2021-01-16 11:17:20
【问题描述】：

所以，我有一个连接到 React Context API 的输入元素 - 当元素未嵌套在组件中时，更新值 onChange 有效。在输入下方，我渲染了一个返回输入字段的不同组件。此输入字段也连接到上下文 API，但输入失去焦点 onChange。

我知道我可以添加“密钥”甚至“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;

【问题讨论】：

您是否尝试在DashBody 的主体之外定义DashboardBody 组件，以便每次渲染DashBody 时都不会重新定义它？
@JakubKosiński 它有效！ tytytyt！

标签： html reactjs forms ecmascript-6 ecmascript-2016

【解决方案1】：

看起来您每次呈现DashBody 时都在重新定义DashboardBody 组件。您在DashboardBody 的输入中失去了焦点，因为您正在使用DashBody 中的dispatch，因此每次调用dispatch 时，DashBody 组件都会重新渲染并渲染不同的@ 987654328@ 组件。您可以提取DashboardBody 并将其定义在DashBody 之外，但请确保在DashboardBody 中使用useContext(Context)：

const DashboardBody = () => {
  const { state, dispatch } = useContext(Context); // make sure you have your own dispatch method

    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>
    );
  };

【讨论】：