80672


[demo](https://codesandbox.io/embed/wispy-
fog-9eu15?fontsize=14&hidenavigation=1&theme=dark)  
↑  
追加、削除、値の編集が可能な配列があります。  
React.jsで実装しています。

Upボタンを押下で1つ前に、Downボタンを押下で1つ後ろに移動させたいです。  
例えばリストが下記になっている場合、

[code]

    ・hoge
    ・fuga
    
[/code]

fugaのUpボタン押下で下記の並び順に変更したいです。

[code]

    ・fuga
    ・hoge
    
[/code]

* * *

コードは下記の通りです。

[code]

    const rowdefaultItem = {
      id: short.generate() // uuid生成,
      name: ""
    };
    const [items, setItems] = useState([defaultItem]);
    const addItem = () => {
      if (items.length < 5) setItems([...items, defaultItem]);
    };
    const deleteItem = (e) => {
      const itemId = e.currentTarget.id;
      const newItems = items.filter((item) => item.id !== itemId);
      setItems(newItems);
    };
    
    const changeRow = (e) => {
      const selectItem = e.currentTarget;
      const method = selectItem.name;
      if (method === "up") {
        // 1つ前に移動
      } else if (method === "down") {
        // 1つ後に移動
      }
    };
    
    const list = items.map((item) => (
      <li key={item.id}>
        <dl>
          <dt>Name</dt>
          <dd>
            <input type="text" defaultValue={item.name} />
          </dd>
        </dl>
        <div>
          <button onClick={changeRow} name="up" id={item.id}>
            Up
          </button>
          <button onClick={changeRow} name="up" id={item.id}>
            Down
          </button>
        </div>
        <button onClick={deleteItem} id={item.id}>
          Delete
        </button>
      </li>
    ));
    
    return (
      <>
        <p>{items.length} / 5</p>
        <button onClick={addItem}>Add</button>
        <ul>{list}</ul>
      </>
    );
    
[/code]

* * *

「javascript 配列
並び変え」でググってみたのですが、昇順や降順で並び替えする、といったリスト全体の並び替え方法しか見つけられることができなかったため、質問する次第です。


CC BY-SA 4.0
2021-08-08T02:06:03.947
80669
2021-08-08T06:34:05.557
32275
question
javascript reactjs array
オブジェクトが格納された配列の内、ボタンを押すことで任意のオブジェクトを配列の中で１つ前または１つ後ろに移動させたい


検索した「並び替え」だと「ソート」になってしまうので、今回のような場合は「配列 操作」などで検索するとよさそうです。

* * *

例えば `splice()` メソッドを使うことで、配列中のインデックスと削除 (または追加) したい要素を指定して配列を操作することが可能です。

**参考:**

  * [Array.prototype.splice()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
  * [配列操作(追加, 削除, filter, map, reduceなど)](https://www.wakuwakubank.com/posts/280-javascript-array-helper/)


CC BY-SA 4.0
2021-08-08T04:30:56.170
80672
2021-08-08T04:30:56.170
3060
80669
answer


「1つ前に移動」「1つ後に移動」は **要素の値を入れ替える動作** なので、特別なメソッドは必要ないと考えます。

[code]

    'use strict';
    function swapArrayValue (array, indexA, indexB) {
      const temp = array[indexA];
    
      array[indexA] = array[indexB];
      array[indexB] = temp;
    
      return array;
    }
    
    const items = [1,2,3,4,5];
    console.log(JSON.stringify(items)); // [1,2,3,4,5]
    swapArrayValue(items, 3, 4);
    console.log(JSON.stringify(items)); // [1,2,3,5,4]
    swapArrayValue(items, 2, 3);
    console.log(JSON.stringify(items)); // [1,2,5,3,4]
    swapArrayValue(items, 1, 2);
    console.log(JSON.stringify(items)); // [1,5,2,3,4]
    swapArrayValue(items, 0, 1);
    console.log(JSON.stringify(items)); // [5,1,2,3,4]
[/code]

Re: C.V.Alkan さん


CC BY-SA 4.0
2021-08-08T06:34:05.557
80674
2021-08-08T06:34:05.557
20262
80669
answer