通过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)).current
moveRow
可以改成普通函数,函数体中直接将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