更改列表元素的顺序答案

【问题标题】：Changing order of list elements更改列表元素的顺序
【发布时间】：2020-11-12 09:50:37
【问题描述】：

我想知道，如何更改某些列表中元素的顺序。

例如，我会在下面有这个列表和更改顺序的按钮：

<button onClick={"function for moving the item up"}>Move Up</button>
<button onClick={"function for moving the item down"}>Move Down</button>

<ul>
  <li>Item1</li>
  <li className="selected-item">Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

因此，如果我单击“上移”按钮，我希望类名称为“选定项”的项目上移（更改订单位置）。与单击“下移”按钮的情况完全相同，但项目当然会下移。

谢谢。

【问题讨论】：

这能回答你的问题吗？ JavaScript moving element in the DOM
这不是 SO 的工作方式...您需要向我们展示一些您尝试过的代码，哪些不起作用等等...stackoverflow.com/help/how-to-ask
这被标记为 React 问题。你不应该根据他们的类名来渲染/排序东西。项目应存储在状态中，具有唯一标识符，然后在定义的状态列表中向上/向下移动它们的一些函数

标签： javascript html reactjs jsx

【解决方案1】：

我知道一种粗鲁的做事方式。

首先，确保您的元素在列表中。
然后，允许选择单个元素。
仅在有选择时才显示“移动”按钮。
更新当前和前一个或下一个元素的索引，交换它们。
由于状态更新，应用会以正确的方式重新呈现。

这是一个演示。

import React, { Component } from "react";
import "./styles.css";

export default class App extends Component {
  state = {
    items: ["Milk", "Curd", "Yogurt"],
    currentSelection: -1
  };
  selectHandler = (idx) => {
    let currentSelection = -1;
    if (this.state.currentSelection !== idx) {
      currentSelection = idx;
    }
    this.setState({
      currentSelection
    });
  };
  handleMove = (dir) => {
    const { currentSelection } = this.state;
    const items = [...this.state.items];
    if (dir === "up") {
      // Swap the currentSelection value with the previous one.
      let a = items[currentSelection];
      items[currentSelection] = items[currentSelection - 1];
      items[currentSelection - 1] = a;
    } else if (dir === "down") {
      // Swap the currentSelection value with the next one.
      let a = items[currentSelection];
      items[currentSelection] = items[currentSelection + 1];
      items[currentSelection + 1] = a;
    }
    this.setState({
      items,
      currentSelection: -1
    });
  };
  render() {
    const { items, currentSelection } = this.state;
    return (
      <div>
        <p>Click to select and again click to deselect.</p>
        <ul>
          {items.map((item, key) => (
            <li
              key={key}
              className={currentSelection === key ? "active" : undefined}
              onClick={() => this.selectHandler(key)}
            >
              {item}
            </li>
          ))}
        </ul>
        {currentSelection !== -1 && (
          <div>
            <p>What do you wanna do?</p>
            <button
              disabled={currentSelection === 0}
              onClick={(e) => {
                e.preventDefault();
                this.handleMove("up");
              }}
            >
              Move Up
            </button>
            <br />
            <button
              disabled={currentSelection === items.length - 1}
              onClick={(e) => {
                e.preventDefault();
                this.handleMove("down");
              }}
            >
              Move Down
            </button>
          </div>
        )}
      </div>
    );
  }
}

演示：https://uiyq8.csb.app/

预览

【讨论】：