时间戳

首页 > 解决方案 > 仅当在 React 中触发回调时才从状态返回值

reactjs - 仅当在 React 中触发回调时才从状态返回值

问题描述

我正在使用react-resizable库来调整表中列的大小。

使用库的 API，我可以在开始onSortStart和onSortStop完成元素大小调整时调用。

当我登录触发的回调时，我只在调整大小开始时看到一个日志，在调整大小停止时看到一次 - 到目前为止一切都很好。

但我想要的是能够返回一个布尔标志，当调整大小开始时为真，当调整大小停止时为假。

问题是每次useStateful重新创建/渲染我的自定义挂钩时，状态都会发生变化。所以我得到了数百个变量的更新版本isResizing。

我怎样才能让isResizing启动时返回一次，停止时返回一次？

这是我的代码：

const ResizableColumn = (props: ResizableColumnProps): ReactElement => {
    const { onResizeStart, onResizeStop } = useStateful();

    const {
        onResize, width, className, children, style,
    } = props;

    if (!width) {
        return <th className={className} style={style}>{children}</th>;
    }
    return (
        <Resizable
            width={width}
            height={0}
            onResize={onResize}
            minConstraints={[150, 150]}
            draggableOpts={{ enableUserSelectHack: false }}
            onResizeStart={onResizeStart}
            onResizeStop={onResizeStop}
        >
            <th className={className} style={style}>{children}</th>
        </Resizable>
    );
};
export default ResizableColumn;

使用有状态的：

const useStateful = (): any => {
  const [isResizing, setIsResizing] = useState(false);
  const onResizeStart = (): void => {
    console.log('%c Resizing Started!', 'color: green;'); // logs once - perfect
    setIsResizing(true);
  };
  const onResizeStop = (): void => {
    console.log('%c Resizing Stopped!', 'color: green;'); // logs once - perfect
    setIsResizing(false);
  };
  console.log('%c isResizing', 'color: green;', isResizing); // logs hundreds of times with different values

  return { isResizing, onResizeStart, onResizeStop };
};
export default useStateful;

我也尝试过使用useRef，但同样的事情发生了：

const useStateful = (): any => {

  const isResizing = useRef<boolean>();

  const onResizeStart = (): void => {
    console.log('%c Resizing Started!', 'color: green;'); // logs once - perfect
    isResizing.current = true;
  };
  const onResizeStop = (): void => {
    console.log('%c Resizing Stopped!', 'color: green;'); // logs once - perfect
    isResizing.current = false;
  };
  console.log('%c isResizing', 'color: green;', isResizing.current); // logs hundreds of times with different values

  return { isResizing, onResizeStart, onResizeStop };
};
export default useStateful;

标签： reactjs

解决方案

Ciao，我看了你的代码很长时间，我唯一注意到的是，在你的自定义钩子上useStateful，与你使用自定义钩子的行相比，你返回的元素数量不同。我在这里做了一个小例子。

自定义钩子在概念上与您的相同：

const useStateful = () => {
   const [isResizing, setIsResizing] = useState(false);

   const onResizeStart = () => {
     setIsResizing(true);
     console.log("onResizeStart");
   };

   const onResizeStop = () => {
     setIsResizing(false);
     console.log("onResizeStop");
   };

   console.log(isResizing);
   return [isResizing, onResizeStart, onResizeStop];
};

但是，当我使用这个钩子时，我写道：

const [isResizing, onResizeStart, onResizeStop] = useStateful();

而已。我知道我的示例可能不是您想要的，但是重新创建您的环境有点棘手。

推荐阅读