时间戳

首页 > 解决方案 > 在功能组件的数据表中反应输入失去焦点

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

问题描述

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

Codesandbox：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;

标签： javascriptreactjsreact-table

解决方案

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

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

沙盒链接

推荐阅读