Блог

Я пытаюсь передать данные во всплывающее окно Modal (bootstrap) и отобразить некоторые данные. У меня есть список заказов с кнопкой «отображать информацию», и каждая кнопка, которую я нажимаю, должна отображаться во всплывающем окне (модальные) разные данные.

Мой вопрос в том, как мне передать данные в модальный?

эта строка <Button variant="primary" onClick={() => {this.handleModal(index)}}> Items info</Button> должна вызвать модальный. В функции handleModal он передает индекс порядка. А затем я обновляю индекс setState handleModal функции. Модальный open, но к нему ничего не передается.

Я не уверен, что это правильный способ сделать это. Кроме того, модальный находится внутри цикла filteredOrders, должен ли я переместить модальный вне цикла? И если да, то как мне это сделать и где?

 import React, {useState} from 'react';
import './App.scss';
import {createApiClient, Item, Order} from './api';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css'
export type AppState = {
  orders?: Order[],
search: string;
show:boolean;
item?: Item,
order_id: number,
}


const api = createApiClient();

export class App extends React.PureComponent<{}, AppState> {


state: AppState = {
    search: '',
    show:false,
    order_id: 0,
};

searchDebounce: any = null;


async componentDidMount() {
    this.setState({
        orders: await api.getOrders()
    });
}
async getItem(itemID: string){
    this.setState({
        item: await api.getItem(itemID)
    });
}

render() {
    const {orders} = this.state;
    return (
        <main>
            <h1>Orders</h1>
            <header>
                <input type="search" placeholder="Search" onChange={(e) => this.onSearch(e.target.value)}/>
            </header>
            {orders ? <div className='results'>Showing {orders.length} results</div> : null}
            {orders ? this.renderOrders(orders) : <h2>Loading...</h2>}

        </main>
    )
}
handleModal(index: number)
{
    this.setState({
        show:true,
        order_id: index,
    })
}
handleClose () {
    this.setState({show: false})
}
renderOrders = (orders: Order[]) => {

    const filteredOrders = orders
        .filter((order) => (order.customer.name.toLowerCase()   order.id).includes(this.state.search.toLowerCase()));
    const requiredItem = this.state.order_id;
    const modelData = filteredOrders[requiredItem];
    return (
        <div className='orders'>
            {filteredOrders.map((order,index) => (
                <div className={'orderCard'}>
                    <div className={'generalData'}>
                        <h6>{order.id}</h6>
                        <h4>{order.customer.name}</h4>
                        <h5>Order Placed: {new Date(order.createdDate).toLocaleDateString()}</h5>
                    </div>
                    <div className={'fulfillmentData'}>
                        <h4>{order.itemQuantity} Items</h4>
                        <img src={App.getAssetByStatus(order.fulfillmentStatus)}/>
                        {order.fulfillmentStatus !== 'canceled' amp;amp;
                        <a href="#" onClick={() => this.ChangeStatus(order)}>Mark
                            as {order.fulfillmentStatus === 'fulfilled' ? 'Not Delivered' : 'Delivered'}</a>

                        }


                    </div>
                    <div className={'extraData'}>

                        <Button variant="primary" onClick={() => {this.handleModal(index)}}> Items info</Button>

                        <Modal show={this.state.show} >

                            {/*{console.log(modelData)}*/}
                            {/*<Modal.Header closeButton>*/}
                            {/* <Modal.Title>Item Info</Modal.Title>*/}
                            {/*</Modal.Header>*/}
                            <Modal.Body>
                              { console.log(modaelData) }
                            </Modal.Body>
                            <Modal.Footer>

                                <Button onClick={() =>{ this.handleClose()}}>
                                    Close
                                </Button>

                            </Modal.Footer>
                        </Modal>
                    </div>
                    <div className={'paymentData'}>
                        <h4>{order.price.formattedTotalPrice}</h4>
                        <img src={App.getAssetByStatus(order.billingInfo.status)}/>
                    </div>
                </div>
            ))}
        </div>
    )
};
  

}

экспорт приложения по умолчанию;

Я не думаю, что вам нужно передавать данные в модальный, а в первую очередь составлять модальный с данными. В настоящее время он пуст. Затем вы можете продолжать скрывать / показывать полный модальный с handleModal помощью .