質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

364閲覧

Reactで選択したアイテムの順番にデータを取得したい

k10a

総合スコア35

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/14 16:39

前提・実現したいこと

Reactで選択したアイテムを追加/削除できるようにしたい
上記の質問にて、親切な方にアイテムの選択にて、chosen: trueを利用するようなアドバイスを受けて、実装を進めていました。

今回困っているのは、この選択したアイテムを選択した順番に記号をつけたいと考えています。

ID: 2のアイテムを取ったあとに、ID: 1のアイテムを取った場合は、ID: 2が選択されたアイテムが1番目になって、更にそのID: 2が選択から外れた場合にはその次に指定されていたID: 1が繰り上がって1番目になるといった仕組みを作りたいと考えています。

発生している問題・エラーメッセージ

selectedIdのカウントで取得する方法が検討つきません。

該当のソースコード

◾️Select.js
親コンポーネント

import React, { Component } from 'react'; import ItemList from './common/ItemList'; class Select extends Component { constructor(props) { super(props); this.state = { items: [ { id: 1, name: 'React', chosen: false, }, { id: 2, name: 'Redux', chosen: false, } ] }; } _handleSelect = id => event => { const items = [...this.state.items]; const item = items.find(item => item.id === id); const count = items.filter(item => item.chosen).length; item.chosen = !item.chosen; this.setState({ item, selectedId: +=1 }); } render() { return ( <div className="App"> <h1>SelectItem</h1> <ItemList items={this.state.items} handleSelect={this._handleSelect} /> </div> ); } } export default Select;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

こちら配列をpushしていけば解決しました。

JavaScript

1 2 selectedItems.push(item); 3

投稿2018/07/15 06:24

k10a

総合スコア35

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問