###前提・実現したいこと
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に
まだReactは勉強しはじめたばかりです。
ご教示頂けますと幸いです。
よろしくお願い足します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/28 02:59