我使用Meteor和React为我的示例应用程序构建一个简单的分类平台。在处理过滤后的搜索时,我遇到了一个简单的问题。
我有一个组件,可以在从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;
发生的是,当我提交表单时,搜索结果按照它应该返回,但是当状态改变时,名称和其他字段作为父组件的状态完整的组件重新渲染,包括父组件和子组件。这是应该发生的方式。
我想知道是否还有其他方法可以做到。
我想在父组件的数据更改中重新渲染我的子组件。