输入字段失去对每个字符类型的关注 - 反应

Question

我正在尝试在表格的标题上添加列过滤器，但在字段上每次输入后，它就会失去焦点。

我的主要组件：在这里，我初始化了一个本地状态：searchColArr，fetchData 中使用的所有其他状态都是 redux 状态，正在使用 useSelectror 进行初始化

Category.jsx

const [searchColArr, setSearchColArr] = useState({
    name: "",
});

//all these default value are either local state or redux state
function fetchData(
    newPage = page,
    newPerPage = perPage,
    newOrder = order,
    newDir = dir,
    newSearchColArr = searchColArr,
    newSearch = search
) {
    dispatch(
        listCategory(
            newPage,
            newPerPage,
            newOrder,
            newDir,
            newSearchColArr,
            newSearch
        )
    );
}

const headerRow = React.useMemo(
    () => [
        {
            header: "Name",
            name: "name",
            filter: true,
            sort: true,
        },
        {
            header: "Action",
            name: "id",
            filter: false,
            sort: false,
        },
    ],
    []
);

const TBody = () => {
        return (
            <tbody key="tbody">
                {list &&
                    list.map((row, i) => (
                        <tr key={row.id}>
                            <td>{row.name}</td>
                            <td>
                                <ActionColumn id={row.id} />
                            </td>
                        </tr>
                    ))}
            </tbody>
        );
    };

const handleColSearch = ({ currentTarget: input }) => {
    setSearchColArr({
        ...searchColArr,
        [input.name]: input.value,
    });
};
useEffect(() => {
    fetchData();
}, [searchColArr]);

return (
    <div className="row">
        <div className="col-md-12">
            {/* REDUX TABLE STARTS */}

            <ReduxTable
                key="redux-table"
                isLoading={isLoading}
                headerRow={headerRow}
                list={list}
                page={page}
                perPage={perPage}
                order={order}
                dir={dir}
                total={total}
                totalPage={totalPage}
                searchColArr={searchColArr}
                handlePageLengthChange={handlePageLengthChange}
                handlePageChange={handlePageChange}
                handleColSearch={handleColSearch}
                TBody={TBody}
            />
            {/* REDUX TABLE ENDS */}
        </div>
    </div>
);

而且，在 Redux Table 中，我正在加载另一个组件 ReduxTableHeader

ReduxTable

const ReduxTable = ({
    isLoading,
    headerRow,
    list,
    page,
    perPage,
    order,
    dir,
    total,
    totalPage,
    searchColArr,
    handlePageLengthChange,
    handlePageChange,
    handleColSearch,
    TBody,
}) => {
    return (
        <div className="card-box">

            {/* TABLE HEADER AND BODY just looping thorugh list*/}
            <table
                id="basicTable"
                className="table table-bordered action-table table-striped table-hover mb-0"
            >
                {/* ReduxTableHeader */}
                <ReduxTableHeader
                    key="redux-table-header"
                    headerRow={headerRow}
                    searchColArr={searchColArr}
                    handleColSearch={handleColSearch}
                />

                <TBody />
            </table>


        </div>
    );
};

ReduxTableHeader

    return (
        <thead key="thead">
            <tr>
                //list of header name
            </tr>
            <tr key="filter-row">
                {headerRow &&
                    headerRow.map((v, i) => (
                        <th key={v.name}>
                            {v.filter ? (
                                <input
                                    type="search"
                                    className="form-control form-control-sm d-inline-block"
                                    placeholder=""
                                    aria-controls="datatable"
                                    name={v.name}
                                    value={searchColArr[v.name] || ""}
                                    onChange={handleColSearch}
                                    autoComplete="off"
                                    key={"index" + i}
                                />
                            ) : (
                                ""
                            )}
                        </th>
                    ))}
            </tr>
        </thead>
    );

这个表头是我加载输入字段的地方，每当我在这个字母上输入时，都会失去自动焦点。我该如何解决？

Answer 1

您通过创建像 Tbody 这样的嵌套组件违反了 React 规则。这会在每次渲染时创建新组件（即使函数名称保持不变），并导致该组件重新挂载

在 99.999% 的情况下，您的输入失去焦点是因为它的一个父组件重新挂载，因此每次您输入内容时都会创建一个新的组件树（和新的输入元素）。您可能正在做与上面组件树中的 Tbody 相同的事情，并且每次触发 fetchData 时都会重新安装整个 Category 组件。要确认您可以注释掉这个触发fetchData的useEffect

Answer 2

由于input 组件失去焦点，这意味着它被重新渲染。仅当输入组件之一已更改类型或更改上层树时才会发生这种情况。在这种情况下，react 确实完成了重新渲染。

所以我猜每个渲染都定义了一个父组件 [ReduxTable, ReduxTableHeader]。就像你为 TBody 做的那样。

在这种情况下，React 认为它是一种新型组件并破坏了先前的树并执行完整的重新渲染，这会导致性能滞后，并且在您的情况下会使输入失去焦点。

关于性能，您不应该在函数内部定义组件。 它使反应变得愚蠢。

为了防止这种情况，您需要确保所有输入的父组件都在 Render 函数之外定义。在这种情况下，在函数组件之外。

请查看我的代码沙箱链接，该链接演示了 2 个案例。

1. 当您尝试编辑第一行输入时，它不会失去焦点
2. 当您尝试编辑 TBody 中的其他输入时，将失去焦点 也许你也有同样的问题。

https://codesandbox.io/s/react-playground-rvikz?file=/src/App.js:567-572

Answer 3

为您的输入指定一个唯一键将导致 React 重用它而不是重绘它。所以在设置视图状态后应该保持焦点。

return (
  <thead>
    <tr>
      /list of header name
    </tr>
    <tr>
      {headerRow &&
        headerRow.map((v, i) => (
          <th key={v.name}>
            {v.filter ? (
              <input
                 type="search"
                 className="form-control form-control-sm d-inline-block"
                 placeholder=""
                 aria-controls="datatable"
                 name={v.name}
                 value={searchColArr[v.name] || ""}
                 onChange={handleColSearch}
                 autoComplete="off"
                 key={'input' + i}
               />
             ) : (
               ""
             )}
          </th>
      ))}
    </tr>
  </thead>
);

看看this post