我正在尝试在表的标题上添加列过滤器,但是在每次输入字段后,它都失去了焦点。
我的主要组件:在这里,我初始化了一个本地状态:searchColArr
以及 fetchData
中使用的所有其他状态是 redux 状态,正在使用 useSelectror
初始化
分类.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>
);
这个表头是我加载输入字段的地方,每当我输入这封信时,就会失去自动焦点。我怎么能修好呢?
最佳答案
您通过创建嵌套组件(如 Tbody
)违反了 React 规则。 .这会在每次渲染时创建新组件(即使函数名称保持不变),并导致该组件重新安装
在 99.999% 的情况下,您的输入失去焦点是因为其父组件之一重新安装,因此每次键入内容时都会创建一个新的组件树(和新的输入元素)。您可能正在做与上面组件树中的 Tbody 相同的事情,以及您的整个 Category
每次触发时都会重新安装组件 fetchData
.为了确认你可以注释掉这个 useEffect
触发 fetchData
关于reactjs - 输入字段失去对每种字符类型的关注 - react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67498940/