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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

Q&A

解決済

1回答

649閲覧

Reactでjsonデータを読み込んで、絞り込みができるようにしたい

gksh7

総合スコア40

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

0グッド

0クリップ

投稿2017/08/21 00:15

###前提・実現したいこと
Reactでjsonデータを読み込んで、絞り込みができるようにしたいと思っています。

###発生している問題・エラーメッセージ
jsonデータを一覧にすることはできるのですが、
絞込みをしようと、inputに何かを入れると、下記のエラーが起きます。

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See App

###該当のソースコード
var data = [
{ id: 1, name: 'abc' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'boy' },
{ id: 4, name: 'woo' },
{ id: 5, name: 'hoge' },
{ id: 6, name: 'apple' }
];

var App = React.createClass({
getInitialState: function(){
return {data: this.props.data};
},

handleFilterVal(val){
var line = this.props.data.filter(function(item){
item.id.toString().indexOf(val)>=0 || item.name.toLowerCase().indexOf(val)>=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>
<Form onFilterVal={this.handleFilterVal.bind(this)} />
<ul>
{list}
</ul>
</div>
);
}
});

var Form = React.createClass({
_filterVal(){
var val = ReactDOM.findDOMNode(this.refs.myinput).value;
this.props.onFilterVal(val);
},
render: function(){
return(
<div>
<span style={{ marginRight: '8px', fontSize: '12px' }}>
キーワードで絞り込む:
</span>
<input type="text" ref="myinput" defaultValue="" onKeyUp={this._filterVal.bind(this)} />
</div>
);
}
});

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

###補足情報(言語/FW/ツール等のバージョンなど)
現在は、環境の構築は行わず、下記スクリプトをCDNでHTMLに読み込む方法で書いています。

<script src="https://unpkg.com/react@15.3.0/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

初学者です。
ご教示いただけますと助かります。
何卒、宜しくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

メッセージによると、

javascript

1<Form onFilterVal={this.handleFilterVal.bind(this)} />

javascript

1onKeyUp={this._filterVal.bind(this)}

に対する警告だと思います。メッセージを信じて、 .bind(this) を削除してみてはどうでしょうか?

すみません、あくまで推測ですが、Reactをes6で使う場合のbindの問題を見ると、この書き方は ES6 のときの書き方で、 ES5 のときは bind しなくてよいのではないでしょうか?

投稿2017/08/21 12:18

mit0223

総合スコア3401

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

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

gksh7

2017/08/21 14:27

ご丁寧なご回答をありがとうございます。 2箇所の .bind(this) を削除してみたところ、エラーは表示されなくなりました。 エラーをきちんと解釈しないと行けないですね。 そして、ES5とES6の書き方の違いも、もっと勉強します。 ありがとうございました。 ただ、このエラーとは別問題で、うまく絞り込むことができませんでした。 この問題については、もう少し自分で頑張ってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問