• Вставить в input значение введенное ранее?

    Vextor-ltd
    @Vextor-ltd
    Если по-серьёзному, то как-то так :)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Radio</title>
      <style>
        body {
          min-width: 100vw;
          min-height: 100vh;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
    
        input {
          margin: 10px;
        }
      </style>
    </head>
    
    <body>
      <div class="text-btns">
        <input type="text" name="name" id="name">
        <input type="text" name="surname" id="surname">
      </div>
      <div class="radio-btns">
        <input type="radio" name="shippingMethod" value="sdek" class="shippingMethod" checked>
        <input type="radio" name="shippingMethod" value="rupost" class="shippingMethod">
        <input type="radio" name="shippingMethod" value="pickup" class="shippingMethod">
      </div>
    
      <script>
        const inputName = document.getElementById('name');
        const inputSurname = document.getElementById('surname');
    
        [...document.querySelectorAll('[name="shippingMethod"]')].map((method) => {
          method.addEventListener('change', () => {
            if (method.value === 'pickup') {
              nameCurrentValue = inputName.value;
              surnameCurrentValue = inputSurname.value;
              inputName.value = inputSurname.value = 'самовывоз';
            } else {
              inputName.value = nameCurrentValue;
              inputSurname.value = surnameCurrentValue;
            }
          });
        });
      </script>
    </body>
    
    </html>
    Написано
  • Как автоматически увеличивать количество дней на JavaScript?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Спасибо. Осталось только дописать:

    let secNextDate = Date.parse(nextDate) / 1000;
    Написано
  • Gulp-rigger. Почему выскакивает ошибка при импорте в шаблон субшаблона?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Vyach Gor, Короче, тут вот в чём дело.
    Используя gulp-rigger, надо делать на манер SPA как в React –
    т.е. один вход для html.

    Я забыл поправить путь к сорсу для gulp.src!
    У меня было вот так: 'assets/src/**/*.html'
    Т.о. Gulp тянул все html-файлы в сборку.

    А когда я прописал путь вот так: 'assets/src/index.html',
    то вуаля! Всё работает! :)
    Я оставил вот так: 'assets/src/*.html',
    на случай дополнительных страниц.

    Так что ларчик просто открывался. Ничего там в ригере они не правили.
    Если ты посмотришь свой gulpfile.js, то увидишь, что у тебя скорее всего тоже в этом была проблема.

    Сам задал вопрос, сам и ответил на него – это в моём репертуаре )))
    Написано
  • Gulp-rigger. Почему выскакивает ошибка при импорте в шаблон субшаблона?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Vyach Gor, на скринах виден путь. Всё в одной папке. Я кажется догадываюсь в чем тут дело. Но я отъехал. Приеду, проверю свою гипотезу и отпишу!
    Написано
  • Gulp-rigger. Почему выскакивает ошибка при импорте в шаблон субшаблона?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Хм.. Забавно. Рад, что вас это заинтересовало. Давайте разбираться.

    Сейчас запустил второй проект, всё работает
    Вот инфа по нему:

    60706220ae9fd978619028.jpeg

    60706241a2d35180157004.jpeg

    6070626fb7658088393254.jpeg

    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.2",
        "@popperjs/core": "^2.8.3",
        "animate.css": "^3.7.0",
        "bootstrap": "^5.0.0-beta2",
        "caniuse-lite": "^1.0.30001168",
        "chart.js": "^2.9.4",
        "font-awesome": "^4.7.0",
        "fslightbox": "^3.2.2",
        "highlight.js": "^10.6.0",
        "jquery": "^3.5.1",
        "simplebar": "^5.3.0",
        "swiper": "^6.4.11",
        "wow.js": "^1.2.2"
      },
      "devDependencies": {
        "@babel/core": "^7.12.10",
        "@babel/preset-env": "^7.12.10",
        "babel-loader": "^8.2.2",
        "browser-sync": "^2.26.13",
        "browserslist": "^4.16.3",
        "del": "^6.0.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^6.1.0",
        "gulp-cache": "^1.1.2",
        "gulp-clean-css": "^4.3.0",
        "gulp-htmlmin": "^5.0.1",
        "gulp-if": "^3.0.0",
        "gulp-imagemin": "^6.2.0",
        "gulp-newer": "^1.4.0",
        "gulp-plumber": "^1.2.1",
        "gulp-rename": "^1.4.0",
        "gulp-rigger": "^0.5.8",
        "gulp-sass": "^4.1.0",
        "gulp-sourcemaps": "^2.6.5",
        "imagemin-jpeg-recompress": "^6.0.0",
        "imagemin-pngquant": "^8.0.0",
        "terser-webpack-plugin": "^4.2.3",
        "webpack": "^4.46.0",
        "webpack-stream": "^6.1.1"
      }


    // html build
    function html_build () {
        return gulp.src(path.src.html) // get all html files
            .pipe(plumber()) // gulp plugins bug tracking
            .pipe(rigger()) // templates import
            .pipe(gulpif(prodMode, htmlMin({
                sortAttributes: true,
                sortClassName: true,
                collapseWhitespace: true
            })))
            .pipe(gulp.dest(path.build.html)) // build html
            .pipe(browserSync.reload({ stream: true })); // browser-sync reload
    }


    Я сам сетап составлял который мне нужен был для проекта. Т.е. это не чей-то, а мой стартеркит. И там вложенный импорт работал. Я даже не задумывался о том, что он может не работать.
    Написано
  • React. Почему элемент в компоненте становится пустым?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Вообще, происходит куча непонятной мне ерунды. У меня вообще гамбургер уехал за пределы штатного скрол-бара.
    6065b993c482d023617734.jpeg

    Пожалуй, сделаю я проект по-старинке, а параллельно буду осваивать React. Не получится так сходу. В результате не преуспею ни там, ни там.
    Написано
  • React. Почему элемент в компоненте становится пустым?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Buck, А как импортировать скрипты, работающие с реальным DOM? Что-то в инете какая-то разрозненная инфа, обобщить которую и сделать выводы очень сложно.
    Написано
  • React. Почему элемент в компоненте становится пустым?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Это что-то связанное с жизнью компонента? Меня очень интересует вопрос каким образом скрипты, написанные для работы с реальным DOM, использовать в React! Я взял новый проект и решил сразу обкатать его на React, благо не горит, и есть возможность практиковаться. Я бы выполнил это проект за неделю, пользуясь старыми добрыми системами сборки типа Gulp или Webpack, а может и Parcel, чтоб не сильно морочиться. Но я решил восполнить пробел, связанный с React, но кажется, что простым нахрапом его не возьмёшь ))
    В общем.. Как свои старые обкатанные скрипты интегрировать в React?
    Написано
  • React. Почему элемент в компоненте становится пустым?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Владимир,

    У меня почему-то, когда я пытаюсь использовать рефы, происходит аналогичная ситуация!

    import './Header.scss';
    import React from 'react';
    
    function Header() {
      let menu = React.createRef();
      let menuBtn = React.createRef();
      let hamburgerMenu = React.createRef();
      
      console.log('menuBtn: ', menuBtn);
    
      return (
        <>
          <div className="menu" ref={ menu }>
            <div className="hamburger-wrapper" ref={ menuBtn }>
              <div className="hamburger-menu" ref={ hamburgerMenu }></div>
            </div>
           { /* ... */}


    В консоле получаю:
    menu:  Object { current: null } Header.js:11
    menuBtn:  Object { current: null }Header.js:12
    hamburgerMenu:  Object { current: null }
    Написано
  • React. Почему элемент в компоненте становится пустым?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Владимир, пока что я никак не могу понять зачем нужен весь этот геморрой, если компонентного подхода я легко могу добиться, используя тот же Gulp или Webpack, где будет использован нормальный человеческий DOM без всего этого ужаса, где я подключаю абсолютно любую библиотеку и она работает!
    Написано
  • React. Почему элемент в компоненте становится пустым?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Второй день изучаю React. Сейчас уже каша в голове. Про то, что я не могу понять, я написал в сообщении предыдущему комментатору.
    Написано
  • React. Почему элемент в компоненте становится пустым?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Не могу понять следующее.. Вот у меня есть проверенный временем готовый написанный мной код на нативном JS без всяких React заморочек типа рефов и стейтов, где обращение к элементам происходит через querySelector(), ну и так далее всё на нативе, как правильно использовать такой код в компоненте React? И вообще правильно ли это? Как вообще все свои наработанные нативные библиотеки грамотно подключать с React?
    Написано
  • Путь к изображению в React.js?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Иван В, понял. Первый пункт однозначно, так они будут заливаться на сервер с помощью бэка.
    Написано
  • Путь к изображению в React.js?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Иван В, так а как добраться до изображения, если ссылка на него передаётся как параметр в роуте? Ведь в функции компонента импорт делать нельзя.
    Написано
  • Путь к изображению в React.js?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Иван В, а что касается изображений? Поместить их в public?

    Ладно, пойду читать что-то типа структурирования React-приложений.
    Написано
  • Путь к изображению в React.js?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Иван В, Всё что я пытаюсь сделать, это передать в роуте в качестве параметра имя картинки и вывести её на экран вот таким вот образом:

    import { useRouteMatch, Link, useParams } from 'react-router-dom';
    
    function UserId() {
      let { userName } = useParams();
      let userNameСap = userName[0].toUpperCase() + userName.substring(1);
      let match = useRouteMatch();
      let usersLink = match.url.split('/')[1];
      let userNameImg = './img/' + useParams().userName +'.jpg';  // ИМПОРТ В КОМПОНЕНТЕ НЕ ДЕЛАЕТСЯ! КАК БЫТЬ???
    
      return (
        <>
          <div className="container">
            <h1>User: { userNameСap }</h1>
            <img src={ userNameImg } alt={ userNameСap }/>
            <Link to={ `/${usersLink}` }>Назад</Link>
          </div>
        </>
      );
    }
    
    export default UserId;


    Пока не получается. Мне кажется это каким-то геморроем на пустом месте. На чистом JS или PHP через $_GET['imgname'] эта задача решается в считанные секунды!
    Я правда 2-й день только React изучаю :))
    Написано
  • Путь к изображению в React.js?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Сорри!!! Ввёл в заблуждение! Я неправильно назвал картинку. Всё получилось.
    Я только начал изучать React. Вообще пока не понимаю что нужно класть в папку ./public
    В Gulp и Webpack всегда одна папка для разработки, другая на продакшене у меня была. Всё было просто. Тут пока не въезжаю.
    Написано
  • Путь к изображению в React.js?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Он лежит в 'C:\OSPanel\domains\react-new-level\unit-03\src\components\UserId\img\johnson.jpg'
    Написано
  • Путь к изображению в React.js?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Иван В, поместил изображение в папку с компонентом, делаю импорт и получаю ошибку:

    Failed to compile.
    
    ./src/components/UserId/UserId.js
    Module not found: Can't resolve './img/johnson.jpg' in 'C:\OSPanel\domains\react-new-level\unit-03\src\components\UserId'


    Что за ерунда?
    Написано