主页 / 问题 / 1098738
Accepted
Volodumr
Asked:2020-03-24 01:45:36 +0000 UTC2020-03-24 01:45:36 +0000 UTC

如何在点击反应时将产品放在列表的首位

  • 772

我有一个关联数组，我对其进行迭代并显示数据。当我点击一个产品时，如何让它出现在列表的首位？

数组组件

class ProductList extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            productList:[
                {
                    name: "test",
                    description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
                    price: 100,
                    id: 1
                },
                {
                    name: "test",
                    description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
                    price: 100,
                    id: 2
                },
                {
                    name: "test",
                    description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
                    price: 100,
                    id: 3
                }
            ]
        }
    }

    render() {
        return (
            <div className="">
                <ProductCard 
                    productList={this.state.productList}
                />
            </div>
        );
    }
}

多谢

reactjs

1 个回答

  1. Best Answer

    这不是一项艰巨的任务，如果您觉得难以应付这样的任务，最好从一开始就学习 JavaScript 语言本身，然后转向不同的库，例如 React。

    在我看来，解决方案不是很理想。

    我将点击的对象发送给父对象，在那里我有条件地检查id这个对象是否与id我的状态元素匹配，然后我将这个点击的对象添加到数组的零索引中。然后我从数组中删除重复项。

    import React from "react";
import ProductCard from "./ProductCard";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productList: [
        {
          name: "Lamborghini",
          description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
          price: 100,
          id: 1
        },
        {
          name: "Koenigsegg",
          description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
          price: 100,
          id: 2
        },
        {
          name: "Mclaren",
          description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
          price: 100,
          id: 3
        }
      ]
    };
  }

  clickHandler = carId => {
    let updatedState = [...this.state.productList];
    updatedState.forEach(el =>
      el.id === carId.id ? (updatedState = [el, ...updatedState]) : el
    );
    this.setState({ productList: [...new Set(updatedState)] });
  };

  render() {
    return (
      <div className="">
        <ProductCard
          productList={this.state.productList}
          clickHandler={this.clickHandler}
        />
      </div>
    );
  }
}

    产品卡组件 

    export default ({ productList, clickHandler }) => {
  return productList.map(el => (
    <div onClick={() => clickHandler(el)} key={el.id}>
      {el.name}
    </div>
  ));
};

    链接到Codesandbox

    • 1

相关问题