在功能组件的数据表中反应输入失去焦点答案

【问题标题】：React input losing focus in Datatable in functional component在功能组件的数据表中反应输入失去焦点
【发布时间】：2021-05-09 03:21:00
【问题描述】：

在我的 Datatable 中，当我在输入中键入任何字符并在组件内定义组件时，输入会失去焦点。但是，当我将组件直接放在数据表中时，它可以工作。我知道第一种情况不起作用，因为每次我输入一个字符时组件都会重新呈现。但为什么第二种情况有效？以及如何在不将代码直接放在数据表中的情况下使第一个案例工作。

代码沙盒：https://codesandbox.io/s/test-2p30w

不工作（第一种情况）

import Datatable from "react-table";
import { useState } from "react";
const Test = () => {
  const [first, setFirst] = useState("");
  const [second, setSecond] = useState("");

  const Field1 = () => (
    <input
      defaultValue={first}
      onChange={(e) => setFirst(e.currentTarget.value)}
    />
  );

  const Field2 = () => (
    <input
      defaultValue={second}
      onChange={(e) => setSecond(e.currentTarget.value)}
    />
  );

  return (
    <Datatable
      noText
      pageSize={1}
      showPagination={false}
      data={[{ userName: "asdas", email: "asdsad" }]}
      columns={[
        {
          Header: "www",
          accessor: "userName",
          Cell: <Field1 />
        },
        {
          Header: "Email",
          accessor: "email",
          Cell: <Field2 />
        }
      ]}
    />
  );
};

export default Test;

工作（第二种情况）

import Datatable from "react-table";
import { useState } from "react";
const Test = () => {
  const [first, setFirst] = useState("");
  const [second, setSecond] = useState("");

  return (
    <Datatable
      noText
      pageSize={1}
      showPagination={false}
      data={[{ userName: "asdas", email: "asdsad" }]}
      columns={[
        {
          Header: "www",
          accessor: "userName",
          Cell: (
            <input
              defaultValue={first}
              onChange={(e) => setFirst(e.currentTarget.value)}
            />
          )
        },
        {
          Header: "Email",
          accessor: "email",
          Cell: (
            <input
              defaultValue={second}
              onChange={(e) => setSecond(e.currentTarget.value)}
            />
          )
        }
      ]}
    />
  );
};

export default Test;

【问题讨论】：

标签： javascript reactjs react-table

【解决方案1】：

焦点丢失是因为您在 Test 的主体中声明了 Field1 和 Field2 组件，这意味着在每次渲染时都会创建新组件，并且任何状态都将丢失。您可以通过将Field1 和Field2 定义提升到顶级范围并用道具替换局部变量引用来修复它（这将使它们相等，因此您可以只使用单个Field）：

const Field = ({ defaultValue, onChange }) => (
  <input defaultValue={defaultValue} onChange={onChange} />
);

const Test = () => {
  const [first, setFirst] = useState("");
  const [second, setSecond] = useState("");

  return (
    <Datatable
      noText
      pageSize={1}
      showPagination={false}
      data={[{ userName: "asdas", email: "asdsad" }]}
      columns={[
        {
          Header: "www",
          accessor: "userName",
          Cell: (
            <Field
              defaultValue={first}
              onChange={(e) => setFirst(e.currentTarget.value)}
            />
          )
        },
        {
          Header: "Email",
          accessor: "email",
          Cell: (
            <Field
              defaultValue={second}
              onChange={(e) => setSecond(e.currentTarget.value)}
            />
          )
        }
      ]}
    />
  );
};

Sandbox link

【讨论】：