Как использовать window.scrollTo с пользовательским интерфейсом реагирования / материала? - PullRequest
Новая
       6

Как использовать window.scrollTo с пользовательским интерфейсом реагирования / материала?

1 голос
/ 07 января 2020

У меня есть простой функциональный компонент. Это просто условно визуализированная панель предупреждений с сообщением об ошибке. Форма довольно длинная, поэтому при возникновении ошибки панель визуализируется, но пользователь прокручивается до точки, где панель предупреждений находится за пределами экрана. Я хочу, чтобы страница прокручивалась до самого верха всякий раз, когда компонент отображает с ошибкой. Это должно быть 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}
      />
    ...
    )
}

1 Ответ

1 голос
/ 07 января 2020

Возможно, это как-то связано со структурой вашего состояния или тем, как вы обновляете свое состояние в 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>;
};
...