###前提・実現したいこと
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に読み込む方法で書いています。
初学者です。
ご教示いただけますと助かります。
何卒、宜しくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/21 14:27