Javascript 在功能组件的Datatable中，反应输入失去焦点

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

代码沙盒：

不工作（第一种情况）

从“反应表”导入数据表；
从“react”导入{useState}；
常数测试=（）=>{
const[first，setFirst]=useState（“”）；
const[second，setSecond]=useState（“”）；
常量字段1=（）=>(
setFirst（e.currentTarget.value）}
/>
);
常量字段2=（）=>(
设置秒（e.currentTarget.value）}
/>
);
返回(
);
};
导出默认测试；

工作（第二种情况）

从“反应表”导入数据表；
从“react”导入{useState}；
常数测试=（）=>{
const[first，setFirst]=useState（“”）；
const[second，setSecond]=useState（“”）；
返回(
)
},
{
标题：“电子邮件”，
访问者：“电子邮件”，
单元格：(
设置秒（e.currentTarget.value）}
/>
)
}
]}
/>
);
};
导出默认测试；

焦点丢失是因为在

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

const字段=（{defaultValue，onChange}）=>(
);
常数测试=（）=>{
const[first，setFirst]=useState（“”）；
const[second，setSecond]=useState（“”）；
返回(
)
},
{
标题：“电子邮件”，
访问者：“电子邮件”，
单元格：(
设置秒（e.currentTarget.value）}
/>
)
}
]}
/>
);
};


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;

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