javascript - 如何在 react/material UI 中使用 window.scrollTo？

Question

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

我知道正在进行 window.scrollTo 调用，因为“SCROLLING”消息出现在控制台中。但是，实际上并没有发生滚动；窗口保持滚动到表单底部。 我尝试了其他答案中的一些建议，但无法正常工作；任何帮助，将不胜感激。这是我的组件的简化版本:

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}
      />
    ...
    )
}

Answer 1

这可能与您的状态结构或您在 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>;
};