0

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

Главная компонента AllOrder

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

class Orders extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            col: 0,
            data2: {},
            isFetching: true,
            error: null,
            showModal: false
        }
    }
    componentDidMount(){
        fetch('http://79.174.13.220:8080/api/orderEntities')
            .then(res => res.json())
            .then(res2Json => this.setState({col:1, data2: res2Json, isFetching: false}))
    }
    handleModal = () => {
        this.setState({showModal: !this.state.showModal})
    }
    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) => (
                    <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} 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>
    )
}
}
export default Orders

1 ответ 1

1

В чем у вас проблема, стейт общий для всех модалок, поэтому они все сразу и открываются. Нужно что бы у каждой кнопки/модалки был свой стейт, тогда будет работать как вы хотите.

Создайте компонент OrderItem в который вынесите:

<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} 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>

и туда же вынесите логику и стейт отвечающий за модалку:

onstructor(props){
        super(props);
        this.state = {
            showModal: false
        }
    }
handleModal = () => {
        this.setState({showModal: !this.state.showModal})
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.