Ответы пользователя по тегу React
  • Как настроить переключение слайдов React JS?

    @omyraucy
    Если вы пользуетесь React, то забудьте про document.getElement или querySelector со всеми вытекающими. У React для этого реализован свой функционал. Почитайте про useRef в официальной документации.
    Также, здесь не требуется useEffect.

    import React { useState } from "react"
    
    const Slider = ({ photo }) => {
        const [count, setCount] = useState(0)
    
        const next = () => {
            if (count === photo.data.photoAlbum.length - 1) { setCount(0) }
            else { setCount(count + 1) }
        }
    
        const prev = () => {
            if (count === 0) { setCount(photo.data.photoAlbum.length - 1) }
            else { setCount(0) }
        }
    
        return (
            <Carousel fade variant="dark" activeIndex={index}>
                <button onClick={prev}>Prev</button>
                <button onClick={next}>Next</button>
                { photo.data?.photoAlbum.map((res, index) => (
                    { count === index && <Carousel.Item>
                        <img className="d-block w-100" src={res.photo} alt="slide" />
                    </Carousel.Item>}
                )) }
            </Carousel>
        )
    }
    
    export default Slider


    Попробуй так.
    Ответ написан
    Комментировать
  • Как изменить код, чтобы на клике кнопки "Так" в модальном окне добавлялся товар, по которому сделан клик?

    @omyraucy
    Почему бы тебе не попробовать функциональные компоненты React? Это во-первых.
    Во-вторых, попробуй функцию добавления товара сделать немного по-другому.
    Пример:
    У тебя есть state.
    const state = { cart: [], orders: [], modal: {} } // я буду писать, отталкиваясь от объектного React, чтобы было удобнее читать, но если будут ошибки - сори.
    
    /*
    cart - массив с корзиной. В ней хранятся все товары.
    orders - массив товаров в ассортименте.
    */


    Зададим примерную структуру товара:
    В товаре будут следующие поля: id, title (название), description (описание), price (цена), pic (изображение).
    Теперь выводим товар. Завернем его в некий div.
    Распаковываем массив orders.
    { this.state.orders.map((ord, index) => <div onClick={setState(modal = ord)} key={index} className="order">/*тут распихиваешь другие поля (id, price и т.д.)*/</div>)}

    Мы присвоили в modal объект order. Теперь просто пропишем условие, что modal будет появляться только тогда, когда он не равен пустому объекту.

    { Object.keys(modal) > 0 && <Modal data={modal} /> }


    Смотрим, является ли объект пустым. Если да, то ничего не делаем. Если нет, то отображаем модальное окно.

    Резюмируем: в state добавляем массив с товарами. Его потом перебираем через map и при клике меняем состояние modal с пустого объекта на элемент массива товара. Если клик не произошел, то модальное окно отображаться не будет.

    Если надо сделать кнопку закрытия модального окна, то при нажатии кнопки можно просто сделать изменение состояние modal на пустой объект и оно будет закрываться.
    Ответ написан
    Комментировать