时间戳

首页 > 解决方案 > 如何将 window.scrollTo 与 react/material UI 一起使用？

javascript - 如何将 window.scrollTo 与 react/material UI 一起使用？

问题描述

我有一个简单的功能组件。它只是一个带有错误消息的条件渲染警报面板。表单相当长，因此如果出现错误，面板会呈现，但用户已滚动到警报面板离开屏幕的位置。每当组件出现错误时，我希望页面滚动到顶部。这应该是window.scrollTo(0,0)，但我无法让它发挥作用。

我知道正在window.scrollTo拨打电话，因为“滚动”消息出现在控制台中。但是，实际上没有滚动；窗口保持滚动到窗体的底部。我尝试了其他答案中的一些建议，但无法正常工作；任何帮助，将不胜感激。这是我的组件的缩写版本：

const OrderForm = ({
  customer,
  handleSubmit,
  newCustomer,
  omsAccountJwt,
  showAccountSearch,
  storeCode
}) => {
  ...
  const orderState = useSelector(state => state.order);

  useEffect(() => {
    if (orderState.error) {
      console.log('SCROLLING');
      window.scrollTo(0, 0);
    }
  }, [orderState.error]);

  ...

  return (
  ...
      {orderState.error !== null && (
        <AlertPanel
          type="error"
          text={`There was a problem processing the order:  ${orderState.error}`}
        />
      )}
      <Formik
        initialValues={{
          selectedShippingAddress: defaultShippingIndex.toString(),
          selectedPaymentMethod: defaultPaymentIndex.toString(),
          storeCode
        }}
        onSubmit={(values, actions) => handleSubmit(order, values, actions)}
        render={renderForm}
      />
    ...
    )
}

标签： javascriptreactjsmaterial-uiformik

解决方案

它可能与您的状态结构或您如何在handleSubmit. 看看这个工作的代码框，看看它是否有帮助

https://codesandbox.io/s/bitter-platform-kov7s

const Scroller = props => {
  const [orderState, setOrderState] = React.useState({ error: false });
  console.log({ orderState });

  React.useEffect(() => {
    if (orderState.error) {
      console.log("SCROLLING");
      window.scrollTo(0, 0);
    }
  }, [orderState.error]);

  function handleClick() {
    setOrderState({ error: true });
  }

  return <button onClick={handleClick}>Scroll up</button>;
};

推荐阅读