Реагирующая прокрутка вверх кнопки анимации не работает - PullRequest
Новая
       2

Реагирующая прокрутка вверх кнопки анимации не работает

0 голосов
/ 06 марта 2020

Я пытался реализовать jquery прокрутку щелчком кнопки до Top на React. Также я хотел реализовать кнопку, она появляется после 400px вниз. Я пробовал логи c, но похоже, что нажатие кнопки не работает.

Это мой компонент React 

import React from "react";
import { createLogEntry } from "./Api";
import Show from "./Show";
export default function Form() {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");
  const [state, setState] = React.useState({
    name: " ",
    description: " "
  });

  const changeHandler = e => {
    setState({ ...state, [e.target.id]: e.target.value });
  };
  const handleSubmit = async e => {
    e.preventDefault();
    setLoading(true);
    try {
      await createLogEntry({
        name: state.name,
        description: state.description
      });
    } catch (error) {
      setError(error.message);
    }
    setLoading(false);
    setState({ name: " ", description: " " });
  };
  return (
    <React.Fragment>
      <div className="app">
        <button className="btnScrollToTop"> //THIS IS MY SCROLL BUTTON
          <i className="material-icons">arrow_upward</i>
        </button>
        <div className="row">
          <form className="col s12" onSubmit={handleSubmit}>
            {error ? <p className="error">{error}</p> : null}
            <div className="row">
              <div className="input-field col s3">
                <input
                  id="name"
                  type="text"
                  data-length="4"
                  onChange={changeHandler}
                  required
                  value={state.name}
                />
                <label htmlFor="input_text">Topic</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s8">
                <textarea
                  id="description"
                  className="materialize-textarea"
                  data-length="120"
                  onChange={changeHandler}
                  required
                  value={state.description}
                ></textarea>
                <label htmlFor="textarea2">Description</label>
              </div>
            </div>
            <button
              className="btn waves-effect blue lighten-1"
              type="submit"
              name="action"
              disabled={loading}
            >
              {loading ? "Loading..." : "Create Entry"}
            </button>
          </form>
        </div>
      </div>
      <Show />
    </React.Fragment>
  );
}

Это это Css. Css стилизация работает нормально, как и ожидалось. 

.btnScrollToTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e62739;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  border: none;
  outline: none;
  cursor: pointer;
}
.btnScrollToTop:active {
  background: #cc2333;
}

Это файл индекса React. html. Я думаю, что проблема здесь. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      const btnScrollToTop = document.getElementsByClassName(".btnScrollToTop"); //HERE I called the button className from the component and below DOM manipulation.
      btnScrollToTop.addEventListener("click", () => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      });
    </script>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Вместо использования getElementsByClassName просто добавьте слушатель во все классы и также поместите его в функцию document.ready. 

$(document).ready(function() {
    $(".btnScrollToTop").addEventListener("click", () => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      });
});
0 голосов
/ 06 марта 2020

Поскольку вы используете материализацию, почему бы вам не использовать встроенный scrollspy ?

Элемент для прокрутки до: 

<div id="header" class="scrollspy">
   ...
</div>

На цели div мы назначаем ID в качестве цели и класс scrollspy для получения плавной анимации.

Триггер прокрутки: 

<a href="#header">Scroll to trigger!</a>

Инициализация: 

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.scrollspy');
    var instances = M.ScrollSpy.init(elems);
  });

https://materializecss.com/scrollspy.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...