React で Meteor を使用して、サンプル アプリ用の単純な分類プラットフォームを構築しています。フィルタリングされた検索に取り組んでいるときに、単純な問題に遭遇しました。
DB からフェッチした後に検索結果を返すコンポーネントがあります。フォームを保持し、小道具を子コンポーネント (つまり、SearchResults) に渡す別のコンポーネント (検索) があります。
これがコードです。
import React from 'react';
import SearchResults from './searchresults.jsx';
const Search = React.createClass({
getInitialState(){
return {name: undefined, brand: undefined, model: undefined, type: undefined};
},
handleSubmit(){
var name = this.refs.name.value;
var brand = this.refs.brand.value;
var model = this.refs.model.value;
var type = this.refs.type.value;
this.setState({name: name, brand: brand, model: model, type: type});
},
render(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="name" placeholder="Name"/>
<input type="text" ref="brand" placeholder="Brand"/>
<input type="text" ref="model" placeholder="Model"/>
<input type="text" ref="type" placeholder="Type"/>
<button type="submit" action="submit">Submit Form</button>
</form>
<SearchResults name={this.state.name} model={this.state.model} brand={this.state.brand} type={this.state.type} />
</div>
);
}
});
export default Search;
何が起こっているかというと、フォームを送信すると検索結果が想定どおりに返されますが、状態が変更されたときに名前やその他のフィールドが親コンポーネントの状態であるため、親を含む完全なコンポーネントが再レンダリングされ、子コンポーネント。それが起こるはずの方法です。
他に方法があれば教えていただきたいです。
親コンポーネントのデータが変更されたときに、子コンポーネントだけを再レンダリングしたいと考えています。