Reactjs использует функцию из родительского - PullRequest
Новая
       26

Reactjs использует функцию из родительского

0 голосов
/ 24 апреля 2018

У меня есть 2 файла.Один - мой app.js, а другой - productmodal.js

app.js получает список продуктов из вызова API.Он рассматривает эти продукты в списке.Когда пользователь нажимает на изображение, отображается productmodal.js.

productmodal.js показывает всплывающее окно с увеличенным изображением, названием продукта (заголовком) и кнопкой под названием «Product niet aanwezig» (продукт недоступен), если пользовательпри нажатии на эту ссылку письмо отправляется другому пользователю.Когда кнопка нажата, я также хочу активировать другую функцию (getUpdatedProduct).Эта функция будет выполнять длительный опрос по ссылке, чтобы проверить, обновляется ли продукт до нового продукта, и обновить этот продукт в приложении.

Проблема в том, что я не знаю, как вызватьФункция 'getUpdatedProduct' в productmodal.js

Я получаю сообщение об ошибке: Uncaught TypeError: Cannot read property 'getUpdatedProduct' of undefined

Я пробовал некоторые из этих решений https://reactjs.org/docs/faq-functions.html. Особенно функция стрелки в рендере, потому чтоона генерирует новую функцию каждый раз, когда модал нажимается (что мне нужно).

Но, похоже, ничего не работает.У кого-нибудь есть идеи?

App.js: 

import React from 'react';
import image from '../images/sogyologo.svg';
import ProductModal from './ProductModal.js';


class App extends React.Component {

constructor(props) {
    super(props);
    this.toggleModal = this.toggleModal.bind(this);
    this.state = {
        isLoading: true,
        orders: [],
        dealtOrders: [],
        productDetail: [],
        open: false,
        modal: []
    }
}

toggleModal(event)
{
    console.log(event);
    let itemIndex = event.target.getAttribute("data-itemIndex");
    console.log(itemIndex);
    const productModal = this.state.orders[itemIndex];
    console.log(productModal);
    this.setState({
        open: true,
        modal: this.state.orders[itemIndex]
    });
}

handleClose() {
    this.setState({
        open: !this.state.open
    });
}

componentWillMount() {
    localStorage.getItem('orders') && this.setState({
        orders: JSON.parse(localStorage.getItem('orders')),
        isLoading: false
    })
}

componentDidMount() {
    if (!localStorage.getItem('orders')){
        this.fetchData();
    } else {
        console.log('Using  data from localstorage');
    }
}

fetchData() {
    fetch('http://localhost:54408/api/orders/all/testing-9!8-7!6/10-04-2018')
        .then(response => response.json())
        .then(parsedJSON => parsedJSON.map(product => (
            {
                productname: `${product.ProductName}`,
                image: `${product.Image}`,
                quantity: `${product.Quantity}`,
                isconfirmed: `${product.IsConfirmed}`,
                orderid: `${product.OrderId}`
            }
        )))
        .then(orders => this.setState({
            orders,
            isLoading: false
        }))
        .catch(error => console.log('parsing failed', error))
}

// componentWillUpdate(nextProps, nextState) {
//     localStorage.setItem('orders', JSON.stringify(nextState.orders));
//     localStorage.setItem('ordersDate', Date.now());
// }

render() {
    this.handleDoneAction = event =>
    {
        let itemIndex = event.target.getAttribute("data-itemIndex");
        let prevOrders = [...this.state.orders];
        let dealtOrders = [...this.state.dealtOrders];
        const itemToMoveAtLast = prevOrders.splice(itemIndex, 1);
        const addToDealtOrders = dealtOrders.concat(itemToMoveAtLast);
        this.setState({dealtOrders: addToDealtOrders});
        this.setState({orders: prevOrders});
    };

    this.handleUndoAction = event =>
    {
        let itemIndex = event.target.getAttribute("data-itemIndex");
        let orders = [...this.state.orders];
        let dealtOrders = [...this.state.dealtOrders];
        const undoDealtOrder = dealtOrders.splice(itemIndex, 1);
        const addToOrders = orders.concat(undoDealtOrder);
        this.setState({orders: addToOrders});
        this.setState({dealtOrders: dealtOrders});
    };

    const {isLoading, orders, dealtOrders} = this.state;
    return (
        <div>
            <header>
                <img src={image}/>
                <h1>Boodschappenlijstje <button className="btn btn-sm btn-danger">Reload</button></h1>
            </header>

            <div className={`content ${isLoading ? 'is-loading' : ''}`}>
                <div className="panel">
                    {
                        !isLoading && orders.length > 0 ? orders.map((order, index) => {
                        const {productname, image, quantity, orderid} = order;
                        return<div className="product" key={orderid}>
                            <div className="plaatjediv" onClick={this.toggleModal.bind(this) }>
                                <img className="img-responsive" data-itemIndex={index} src={image} />
                            </div>
                            <div className="productInfo">
                                <p>{productname}</p>
                                <p>Aantal: {quantity}</p>
                            </div>
                            <div className="bdone">
                                <button className="btn btn-lg btn-default btndone" data-itemIndex={index} onClick={this.handleDoneAction}>Done</button>
                            </div>
                        </div>
                    }) : null
                    }
                </div>
                <h2>Mandje</h2>
                <div className="panel">
                    {
                        !isLoading && dealtOrders.length > 0 ? dealtOrders.map((dorder, index) => {
                            const {productname, image, quantity} = dorder;
                            return<div className="productDone" key={index}>
                                <div className="plaatjediv">
                                    <img className="img-responsive" src={image} />
                                </div>
                                <div className="productInfo">
                                    <p>{productname}</p>
                                    <p>Aantal: {quantity}</p>
                                </div>
                                <div className="bdone">
                                    <button className="btn btn-lg btn-default btndone" data-itemIndex={index} onClick={this.handleUndoAction}>Undo</button>
                                </div>
                            </div>
                        }) : null
                    }
                </div>
                <ProductModal open={this.state.open} handleClose={this.handleClose.bind(this)}
                              title={this.state.modal.productname} plaatje={this.state.modal.image} orderid={this.state.modal.orderid}/>

                <div className="loader">
                    <div className="icon"></div>
                </div>
            </div>
        </div>
    );
}
}
export default App;

productmodal.js 

import React from 'react';

 class ProductModal extends React.Component {
constructor() {
    super();
    this.getUpdatedProduct = this.getUpdatedProduct.bind(this);
}

handleClose() {
    this.props.handleClose();
}

UserAction(event) {
    let orderid = event.target.value;
    fetch('http://localhost:54408/api/orders/change/testing-9!8-7!6/' + orderid + '/10-04-2018');
    console.log("order id = " + event.target.value);
    this.getUpdatedProduct();
}

getUpdatedProduct() {
    console.log("fetching new product");

}

render() {
    //const open = this.props.open;
    const {title, plaatje, open, orderid} = this.props;
    return (
        <div className={'modal fade in '+(open?'show':'')} role="dialog">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" onClick={this.handleClose.bind(this)} className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">{title}</h4>
                    </div>
                    <div className="modal-body">
                        <img className="plaatjediv img-responsive" src={plaatje} />
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default"
                                onClick={this.handleClose.bind(this)}>Sluiten
                        </button>
                        <button type="button" onClick={this.UserAction.bind()} value={orderid} className="btn btn-primary">Product niet aanwezig</button>
                    </div>
                </div>
            </div>
        </div>
    )
}
 }

 export default ProductModal;
...