Всплывающее окно на определенной кнопке

@Alex562035 · Регистрация: 04.01.2018

Студворк — интернет-сервис помощи студентам

Приветствую формучане, я еще новичок в JavaScript с React и пока не совсем понимаю как решать данную проблему. У меня есть определенный список который отображается методом map из сервера на 56 строке, у этого списка имеется кнопка button на 71 строке с уникальным id кнопок может быть неограниченное количество в зависимости от того скока данных выгружаемых из сервера в JSON. При клике по какой-нибудь кнопке у меня на ней должно отображаться всплывающее(модальное) окно функционал которого прописан в функции handleModal с 17 строки, а процедура отображения на 72 строке, но оно отображается на всех кнопках при клике. Как мне в этом случае изменить код так чтобы всплывающее окно отображалось на той на которую я нажал. Для понимания прикрепляю JSX

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
class AllOrder extends React.Component{
    constructor(props){
        super(props);
        this.state = { 
            col: 0,
            data2: {},
            isFetching: true,
            error: null,
            showModal: false
        }
    }
    componentDidMount(){
        fetch('/api/orderEntities')
            .then(res => res.json())
            .then(res2Json => this.setState({col:1, data2: res2Json, isFetching: false}))
    }
    handleModal = () => {
        this.setState({showModal: !this.state.showModal})
        // return <div>Testing</div>
    }
    render(){
        const {col, data2, isFetching, error } = this.state;
        if (isFetching) return <div>...Loading</div>;
return(
    <>
        <section className={s.orders}>
            <div className={s.orders__container}>
                <h1 className={s.orders__title}>Все заказы</h1>
                <form  className={s.orders__form}>
                
                <input className={s.orders__input} type="date" placeholder="Срок до:" data-toggle="tooltip" title="" data-original-title="Срок до:"/>
                                    
                <input className={s.orders__input} type="text" placeholder="Стоимость от:" data-toggle="tooltip" title="" data-original-title="Только цифры"/>
                
                <input className={s.orders__input} type="text" placeholder="Стоимость до:" data-toggle="tooltip" title="" data-original-title="Только цифры"/>
                
                    <select name="" id="" className={s.orders__region}>
                        <option value="" required>Регион</option>
                    </select>
                    <select name="" id="" className={s.orders__city}>
                        <option value="" required>Мой город</option>
                    </select>
                    <select name="" id="" className={s.orders__service}>
                        <option value="" required>Услуга</option>
                    </select>
                    
                    
                    <input className={s.submit} type="submit" value="Найти"/>
                    <br/>
                    <div className={s.orders__label}>
                    </div>
                </form>
            </div>
        </section>
        <section className={s.execution}>
                {col ? data2["_embedded"]["orderEntities"].map((item, index) => (
                    <div className={s.execution__container}>
                        <div className={s.execution__box}>
                            <div className={s.execution__info}>
                                <div className={s.execution__list}>
                                    <p className={s.execution__services}>Услуга:</p>
                                    <p className={s.execution__services}>Срок исполнения: до 30.09.2020</p>
                                    <p className={s.execution__services}>Стоимость: {item.cost} Р</p>
                                </div>
                                <p className={s.execution__name}>Название: <span>{item.title}</span></p>
                                <div className={s.execution__description}>{item.description}</div>
                                <p className={s.execution__user}>Заказчик:  <a href="#" className="execution__link"></a> <img src="https://s8.********************/uploads/images/2020/11/6ef562d4767cba575a5ac931c26e6bdb.png" alt="" /></p>
                            </div>
                            <div className={s.execution__info}>
                                <img className={s.execution__img} src="https://s8.********************/uploads/images/2020/11/830b09a113baebf4d6272d86719a2bde.png" alt="" />
                                <button id={index} onClick={this.handleModal} className={s.execution__button}>откликнуться</button>
                                {this.state.showModal && <Modal handleModal={this.handleModal} /> }
                                <p className={s.execution__participants}>0 участников</p>
                            </div>
                        </div>
                    </div>
                ))
                    : <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
                }
            </section>
            {/* <Modal  /> */}
    </>
);
 
}
}
 
export default AllOrder;

@drmedus · 09.12.2020, 22:56

Смотри... вот это компонент это простыня из разметки в перемешку с каким-то функционалом. Ничего не понятно... сделай более гранулярно.
Что именно... то, что возвращает на каждой итерации .map (57-76) это ш компонент правильно? Вот и вынеси этот кусок в отдельный компонент. Что это даст... это даст больше читаемости и понятности компоненту AllOrder. Внутри мапа будет возвращаться не портянка из непойми чего, а компонент (то что ему нужно внутри него - передай ему пропами естессно).
Ну а дальше ты уже и сам наверняка догадался... внутри этого отдельного компонента будет свой модал, будет свой стейт отвечающий за показ именно этого модала и свои хендлеры которые и будут переключать стейт.
Один выстрел - два зайца =)

@Alex562035 · 13.12.2020, 11:31 **[ТС]**

Я вроде как упростил читаемость кода и вынес из одной компоненты AllOrders целых три. В главной компоненте я вынес весь список заказов в компоненту Orders, затем из компоненты Orders вынес шаблон одного заказа в компоненту OrdersItem. Я так понял у меня стейт общий для всех модальных окон и поэтому они все одновременно отображаются и нужно это как-то исправить, но что-то путаюсь. И я еще не передал моим вынесенным компонентам Orders и OrdersItem нужные значения, но какие они должны быть как-то не совсем понятно. Вот как выглядят мои изменения в JSX. Также мой map в компоненте Orders отделен от OrderItem в котором находятся значения item для отображения данных из-за чего React их не понимает, возможно их надо как-то правильно передать, так как в вынесенные мной компоненты я ничего не передаю, потому что пока не знаю как это сделать правильно.

Компонента AllOrders с вынесенной компонентой Orders на 34 строке

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class AllOrder extends React.Component{
    render(){   
return(
    <>
        <section className={s.orders}>
            <div className={s.orders__container}>
                <h1 className={s.orders__title}>Все заказы</h1>
                <form  className={s.orders__form}>
                
                <input className={s.orders__input} type="date" placeholder="Срок до:" data-toggle="tooltip" title="" data-original-title="Срок до:"/>
                                    
                <input className={s.orders__input} type="text" placeholder="Стоимость от:" data-toggle="tooltip" title="" data-original-title="Только цифры"/>
                
                <input className={s.orders__input} type="text" placeholder="Стоимость до:" data-toggle="tooltip" title="" data-original-title="Только цифры"/>
                
                    <select name="" id="" className={s.orders__region}>
                        <option value="" required>Регион</option>
                    </select>
                    <select name="" id="" className={s.orders__city}>
                        <option value="" required>Мой город</option>
                    </select>
                    <select name="" id="" className={s.orders__service}>
                        <option value="" required>Услуга</option>
                    </select>
                    
                    
                    <input className={s.submit} type="submit" value="Найти"/>
                    <br/>
                    <div className={s.orders__label}>
                    </div>
                </form>
            </div>
        </section>
        <Orders/>
    </>
);
 
}
}
 
export default AllOrder;

Компонента Orders с вынесенной компонентой OrderItem на 23 строке

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Orders extends React.Component {
 
    constructor(props){
        super(props);
        this.state = {
            col: 0,
            data2: {},
            isFetching: true,
            error: null,
        }
    }
    componentDidMount(){
        fetch('/api/orderEntities')
            .then(res => res.json())
            .then(res2Json => this.setState({col:1, data2: res2Json, isFetching: false}))
    }
    render(){
        const {col, data2, isFetching, error } = this.state;
        if (isFetching) return <div>...Loading</div>;
    return(
        <section className={s.execution}>
                {col ? data2["_embedded"]["orderEntities"].map((item, index) => (
                    <OrderItem/>
                ))
                    : <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
                }
            </section>
    )
}
}
export default Orders;

Компонента OrderItem

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class OrderItem extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            showModal: false
        }
    }
    handleModal = () => {
        this.setState({showModal: !this.state.showModal})
    }
    render() {
        return (
            <div className={s.execution__container}>
                <div key={item.id} className={s.execution__box}>
                    <div className={s.execution__info}>
                        <div className={s.execution__list}>
                            <p className={s.execution__services}>Услуга:</p>
                            <p className={s.execution__services}>Срок исполнения: до 30.09.2020</p>
                            <p className={s.execution__services}>Стоимость: {item.cost} Р</p>
                        </div>
                        <p className={s.execution__name}>Название: <span>{item.title}</span></p>
                        <div className={s.execution__description}>{item.description}</div>
                        <p className={s.execution__user}>Заказчик:  <a href="#" className="execution__link"></a> <img src="https://s8.********************/uploads/images/2020/11/6ef562d4767cba575a5ac931c26e6bdb.png" alt="" /></p>
                    </div>
                    <div className={s.execution__info}>
                        <button id={index} className={s.execution__button}>откликнуться</button>
                        {this.state.showModal && <Modal handleModal={this.handleModal} />}
                        <p className={s.execution__participants}>0 участников</p>
                    </div>
                </div>
            </div>
        )
    }
}
 
export default OrderItem;

@drmedus · 13.12.2020, 12:38

Сообщение от Alex562035

И я еще не передал моим вынесенным компонентам Orders и OrdersItem нужные значения, но какие они должны быть как-то не совсем понятно.

Ты разбил один большой компонент на более мелкие компоненты не потому же что я так сказал верно?)) Ты это сделал потому что это обоснованно и структурно и с точки зрения смысловой нагрузки.
Ты сделал OrderItem - компонент отвечающий за отдельный ордер.
Orders - компонент который объединяет в себя набор из отдельных OrderItem.
AllOrders - компонент контейнер страницы. Отлично. Кучу всего еще можно улучшить, но это отдельный разговор. В рамках обсуждаемого вопроса - отлично.

Разделил. Теперь нужно настроить взаимодействие. Делаем.
на 13 строке компонента Orders ты получил данные. Далее на 22 строке ты катишься по ним мэпом. map тебе на каждой итерации передает текущий элемент массива, в твоем случае ты его item обозвал. Т.е. item у тебя содержит инфу для текущего OrderItem. Ну так вот и передавай этот item в пропс OrderItem-у. Так же про key не забудь внутри .map (зачем, как и для чего в доке реакта почитай). Ну вот и все... с модалом у тебя судя по всему получилось.

@Alex562035 · 13.12.2020, 21:44 **[ТС]**

Тут уже получается не все так гладко из-за map если бы мне пришлось просто передавать значение из OrderItem, то я бы писал например <OrderItem cost={this.state.cost} description={this.state.description} , а в компонент OrderItem бы писал тогда {this.props.cost} и {this.props.description}, но мои данные хранятся в data2, которые я отображаю через map и в этот момент все усложняется для меня как новичка, и еще передаваемые значения item.cost, item.description и другие я наверно не могу передавать их уже через пропсы в таком виде {this.props.item.cost} и {this.props.item.description}, потому что они как бы связаны с map, а туда обычно кладут что-то из стейта типа <OrderItem cost={this.state.cost} description={this.state.description}/> это если бы мой cost и description хранился прямиком в state, но они у меня как бы связаны с map, а из стейта я беру тока мой объект data2(в форме JSON) внутри которого вложен мой cost и decription. Если бы он был бы один и без map я бы передавал бы как-то так <OrderItem cost={this.state.data2["_embedded"]["orderEntities"].cost description={this.state.data2["_embedded"]["orderEntities"].description}. А в OrderItem был бы объявлен как {this.props.cost} В итоге я изначально не понимал как их правильно в моем случае передать.

@drmedus · 13.12.2020, 23:22

Откровенно говоря я вообще ниче не понял=) задай конкретный вопрос

@Alex562035 · 13.12.2020, 23:46 **[ТС]**

Проще говоря, если брать мой последний код где я разбивал на компоненты то я не понимаю как мне правильно передать(указать) нужные мне значения. Вот у меня есть компонент Orders где я прописывал <OrderItem/>, который вынес в отдельный компонент, в нем я должен прокинуть эти пропсы чтобы код не поломался как если бы я это не выносил и я не понимаю что мне дописывать на 23 строке у тега <OrderItem/> у компонента Orders и как мне правильно переписать значения в компонент OrdersItem на 14,19,21 и 22 строке. У меня как-то не получается прокинуть эти пропсы правильно

@drmedus · 14.12.2020, 09:29

Если я правильно понял вопрос, то я на него ответил в предыдущем сообщении. Хочешь код, ну на код =)

JavaScript
1
2
3
4
5
{col ? data2["_embedded"]["orderEntities"].map((item, index) => (
                    <OrderItem item={item}/>
                ))
                    : <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
                }

А внутри OrderItem делай {this.props.item.description}

@Alex562035 · 14.12.2020, 11:12 **[ТС]**

Спасибо, тебе большое за столь подробное разжевывание моего вопроса с самого начала, и у меня все заработало. С прокидыванием через этот пропс оказалось еще проще чем я пытался сделать, так как я на легких примерах их обычно брал из state, что я там сам тока не писал, а надо было всего лишь прописать item={item}.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	09.12.2020, 22:56
	Смотри... вот это компонент это простыня из разметки в перемешку с каким-то функционалом. Ничего не понятно... сделай более гранулярно. Что именно... то, что возвращает на каждой итерации .map (57-76) это ш компонент правильно? Вот и вынеси этот кусок в отдельный компонент. Что это даст... это даст больше читаемости и понятности компоненту AllOrder. Внутри мапа будет возвращаться не портянка из непойми чего, а компонент (то что ему нужно внутри него - передай ему пропами естессно). Ну а дальше ты уже и сам наверняка догадался... внутри этого отдельного компонента будет свой модал, будет свой стейт отвечающий за показ именно этого модала и свои хендлеры которые и будут переключать стейт. Один выстрел - два зайца =) 1

@Alex562035 0 / 0 / 0 Регистрация: 04.01.2018 Сообщений: 35
	13.12.2020, 21:44 [ТС]
	Тут уже получается не все так гладко из-за map если бы мне пришлось просто передавать значение из OrderItem, то я бы писал например <OrderItem cost={this.state.cost} description={this.state.description} , а в компонент OrderItem бы писал тогда {this.props.cost} и {this.props.description}, но мои данные хранятся в data2, которые я отображаю через map и в этот момент все усложняется для меня как новичка, и еще передаваемые значения item.cost, item.description и другие я наверно не могу передавать их уже через пропсы в таком виде {this.props.item.cost} и {this.props.item.description}, потому что они как бы связаны с map, а туда обычно кладут что-то из стейта типа <OrderItem cost={this.state.cost} description={this.state.description}/> это если бы мой cost и description хранился прямиком в state, но они у меня как бы связаны с map, а из стейта я беру тока мой объект data2(в форме JSON) внутри которого вложен мой cost и decription. Если бы он был бы один и без map я бы передавал бы как-то так <OrderItem cost={this.state.data2["_embedded"]["orderEntities"].cost description={this.state.data2["_embedded"]["orderEntities"].description}. А в OrderItem был бы объявлен как {this.props.cost} В итоге я изначально не понимал как их правильно в моем случае передать. 0

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	13.12.2020, 23:22
	Откровенно говоря я вообще ниче не понял=) задай конкретный вопрос 0

@Alex562035 0 / 0 / 0 Регистрация: 04.01.2018 Сообщений: 35
	13.12.2020, 23:46 [ТС]
	Проще говоря, если брать мой последний код где я разбивал на компоненты то я не понимаю как мне правильно передать(указать) нужные мне значения. Вот у меня есть компонент Orders где я прописывал <OrderItem/>, который вынес в отдельный компонент, в нем я должен прокинуть эти пропсы чтобы код не поломался как если бы я это не выносил и я не понимаю что мне дописывать на 23 строке у тега <OrderItem/> у компонента Orders и как мне правильно переписать значения в компонент OrdersItem на 14,19,21 и 22 строке. У меня как-то не получается прокинуть эти пропсы правильно 0

@Alex562035 0 / 0 / 0 Регистрация: 04.01.2018 Сообщений: 35
	14.12.2020, 11:12 [ТС]
	Спасибо, тебе большое за столь подробное разжевывание моего вопроса с самого начала, и у меня все заработало. С прокидыванием через этот пропс оказалось еще проще чем я пытался сделать, так как я на легких примерах их обычно брал из state, что я там сам тока не писал, а надо было всего лишь прописать item={item}. 0

Всплывающее окно на определенной кнопке

Решение