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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

3208閲覧

Reactでjsonデータを読み込んで、ソートをかけたい

gksh7

総合スコア40

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2017/08/27 14:12

編集2017/08/27 14:15

###前提・実現したいこと
Reactでjsonデータのソートをかけたいと思っています。
id番号による昇順のソートです。
ですが、下記のようなエラーが表示されてしまいうまく行きません。

###発生している問題・エラーメッセージ
Uncaught TypeError: this.props.handleSortByAscend is not a function

###ソースコード
var data = [
{ id: 4, name: 'foo' },
{ id: 6, name: 'bar' },
{ id: 2, name: 'baz' },
{ id: 3, name: 'qux' },
{ id: 5, name: 'quux' },
{ id: 1, name: 'foobar' }
];

/********* Appコンポーネント ************/
var App = React.createClass({
getInitialState: function(){
return {data: this.props.data};
},
handleSortByAscend: function(key){
var line = this.state.data.sort(function(a, b){
if(a[key] < b[key]) return -1;
if(a[key] > b[key]) return 1;
return 0;
});
this.setState({ data: line });
},
render: function(){
var list = this.state.data.map(function(data){
return(
<li key={data.id}>
{data.id}: {data.name}
</li>
);
});
return (
<div>
<SortButton onSortByAscend={this.handleSortByAscend} />
<ul>
{list}
</ul>
</div>
);
}
});

/********* SortButtonコンポーネント************/
var SortButton = React.createClass({
_sortByAscend: function(e){
e.preventDefault();
this.props.handleSortByAscend(e.target.value);
},
render: function(){
return(
<div>
<div>
<span style={{marginRight:'8px', fontSize: '12px'}}>idでソート</span>
<button onClick={this._sortByAscend} value="id">昇順</button>
</div>
</div>
)
}
});

ReactDOM.render(
<App data={data} />,
document.getElementById('content')
);

###補足情報
htmlに

<div id="content"></div>を用意し、 この #content にソート結果を表示しようと思っています。

まだReactは勉強しはじめたばかりです。
ご教示頂けますと幸いです。
よろしくお願い足します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

<SortButton onSortByAscend={this.handleSortByAscend} />

onSortByAscendのprop名で子に渡してるので、子の方ではthis.props.onSortByAscendでhandleSortByAscendにアクセスできます。

投稿2017/08/27 17:16

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

gksh7

2017/08/28 02:59

ご回答ありがとうございました。 教えていただいたように変更したら、無事にアクセスできソートがかけられました。 大変、たすかりました。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問