0

我正在使用 Meteor 和 React 为我的示例应用程序构建一个简单的分类平台。在处理过滤搜索时，我遇到了一个简单的问题。

我有一个从数据库获取后返回搜索结果的组件。还有另一个组件（搜索）保存表单并将道具传递给子组件（即搜索结果）。

这是代码。

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;

发生的事情是，当我提交表单时，搜索结果按预期返回，但是当状态更改时，名称和其他字段作为父组件的状态，整个组件重新呈现，包括父组件和子组件。这是它应该发生的方式。

我想知道是否有其他方法可以做到这一点。

我想在父组件中的数据更改时仅重新渲染我的子组件。

4

1 回答 1

0

这是不可能的，如果您将父级中的重新渲染短路，它也会阻止子级重新渲染。在此处和此处阅读有关它的更多信息

于 2016-07-21T09:25:13.790 回答