Reactjs使用来自父级的函数

时间:2018-04-24 15:26:30

标签: reactjs function components parent

我有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;

0 个答案:

没有答案