通过id获取dom元素:[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取
目录[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取 1.根据 ID 获取[.getElementById( )] 2.根据标签名获取[.getElementsByTagNam
顺晟科技
2021-07-09 11:25:27
271
函数组件表格拖拽排序,每次改变表格顺序希望把最新的flowsInfo传给后端,但是拿到的flowsInfo是上一次的,怎么拿到最新的flowsInfo?(类似与setState第二个参数)
const [flowsInfo, setFlowsInfo] = useState([] as any);
const moveRow = useCallback((dragIndex, hoverIndex) => {
const dragRow = flowsInfo[dragIndex];
setFlowsInfo(
update(flowsInfo, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragRow],
],
}),
);
//把最新的flowsInfo传给后端
putFlowsRequest.run(flowsInfo);
}, [flowsInfo]);useEffect 依赖项是 flowsInfo 当发生变化时传给后端
“把最新的flowsInfo传给后端” 这段逻辑写到useEffect中。useEffect第二个参数就是依赖项,表示依赖flowsInfo 的变化会触发函数。
const moveRow = useCallback((dragIndex, hoverIndex) => {
//...
});
useEffect(() => {
putFlowsRequest.run(flowsInfo);
}, [flowsInfo])useRef 手动保存 或者从 setState 函数回调里拿
题主是否需要使用flowsInfo驱动组件re-render,实现界面UI刷新?
useRef 存储就好const flowsInfo = useRef(Object.create(null)).currentmoveRow可以改成普通函数,函数体中直接将index信息存储到flowsInfo中即可
flowsInfo 驱动视图更新引入纯函数设计思想,函数设计编写时,功能要单一明确,moveRow仅用来当拖拽发生改变时更新flowsInfo,将与后端通信的逻辑剥离到useEffect,与后端通信属于副作用。
//...
const moveRow = useCallback((dragIndex, hoverIndex) => {
const dragRow = flowsInfo[dragIndex];
setFlowsInfo(
update(flowsInfo, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragRow],
],
}),
);
}, [flowsInfo])
// 处理副作用
useEffect(() => {
putFlowsRequest.run(flowsInfo);
}, [flowsInfo]) 19
2022-10
19
2022-10
25
2022-09
16
2022-09
15
2022-09
15
2022-09