反应：单击按钮时更改订单列表

Question

我正在使用 Javascript 和 React 制作我的第一个应用程序，并从一个查看购物清单的页面开始。它从 api 调用中获取项目。

如果用户单击“完成”按钮（或者我应该使用复选框吗？）该产品应该位于列表的底部（并用 css 显示为灰色，但这不是问题）。

问题是，我不知道该怎么做。谁能帮帮我？

这是我的代码：

import React from 'react';
//import image from '../images/header.png';
//import Collapsible from './Collapsible';

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        isLoading: true,
        orders: []
    }
}

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/15-03-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() {
    const {isLoading, orders} = this.state;
    return (
        <div>
            <header>
                <img src="/images/header.jpg"/>
                <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 => {
                        const {productname, image, quantity, orderid} = order;
                        return<div className="product" key={orderid}>
                            <div className="plaatjediv">
                                <img className="plaatje" src={image} />
                            </div>
                            <div className="productInfo">
                                <p>{productname}</p>
                                <p>Aantal: {quantity}</p>
                                <p>ID: {orderid}</p>
                            </div>
                            <div className="bdone">
                                <button className="btn btn-sm btn-default btndone">Done</button>
                            </div>
                        </div>
                    }) : null
                    }
                </div>
                <div className="loader">
                    <div className="icon"></div>
                </div>
            </div>
        </div>
    );
}
}
 export default App;

Answer 1

你可以通过这个来实现：

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

}

我在按钮handleDoneAction 上附加了一个事件处理程序。

<button className="btn btn-sm btn-default btndone" data-itemIndex={index} onClick={this.handleDoneAction}>Done</button>

属性data-itemIndex是orders数组中对象的索引。

你的地图功能会是这样的：

orders.map((order, index) => { 
    //content
})

对于成品的不同风格效果，我建议你对所有成品使用不同的数组。