Reactjs 链接到搜索栏中的React组件

我希望我的搜索栏的结果创建一个下拉列表匹配链接到一个组件

在硬刷新之后，第一次单击的搜索结果将呈现该组的显示页面。但是，如果单击另一个搜索结果或重新键入另一个搜索查询，则单击后结果不会呈现链接组件。我确实在浏览器中看到路线发生了变化

谢谢。守则：

var React = require('react');
var GroupStore = require('../stores/group');
var ApiUtil = require('../util/apiUtil');
var Link = require('react-router').Link;

var SearchGroups = React.createClass({
  getInitialState: function(){
    return { searchString: "", groups: GroupStore.all() };
  },
  componentDidMount: function () {
    this.groupListener = GroupStore.addListener(this._onChange);
    ApiUtil.fetchGroups();
  },
  _onChange: function () {
    this.setState({groups: GroupStore.all()});
  },
  componentWillUnmount: function () {
    this.groupListener.remove();
  },
  handleChange: function(e) {
    this.setState({ searchString: e.currentTarget.value });
    this.filteredGroups = this.filterGroups();
  },
  filterGroups: function(){
    var regex = new RegExp(this.state.searchString);
    return this.state.groups.filter(function(group){
      return (group.title.search(regex) > -1);
    });
  },
  render: function(){
    var path = "";
    if (this.filteredGroups !== undefined){
      var groupList = this.filteredGroups.map(function (group) {
        return (<li key={group.id} className='group-search-result'>
        <Link to={'/groups/' + group.id}>{group.title}</Link></li>);
      }.bind(this));
    }
    return(
      <div className="input-group">
        <input type="text"
               className="form-control group-search"
               placeholder="Search groups..."
               onChange={this.handleChange}
               value={this.state.searchString}>
             </input>
             <ul className="group-search-list">
               {groupList}
             </ul>
      </div>
    );
  }
});

module.exports = SearchGroups;

var React=require（'React'）；
var GroupStore=require（'../stores/group'）；
var ApiUtil=require（'../util/ApiUtil'）；
var Link=require（'react-router'）。Link；
var SearchGroups=React.createClass({
getInitialState:函数（）{
返回{searchString:，组：GroupStore.all（）}；
},
componentDidMount:函数（）{
this.groupListener=GroupStore.addListener（this.\u onChange）；
ApiUtil.fetchGroups（）；
},
_onChange:function（）{
this.setState（{groups:GroupStore.all（）}）；
},
componentWillUnmount:函数（）{
this.groupListener.remove（）；
},
handleChange:函数（e）{
this.setState（{searchString:e.currentTarget.value}）；
this.filteredGroups=this.filterGroups（）；
},
filterGroups:function（）{
var regex=new RegExp（this.state.searchString）；
返回此.state.groups.filter（函数（组））{
返回（组.标题.搜索（正则表达式）>-1）；
});
},
render:function（）{
var路径=”；
if（this.filteredGroups！==未定义）{
var groupList=this.filteredGroups.map（函数（组）{
返回（

{group.title}
）；
}.约束（这个）；
}
返回(

{groupList}

);
}
});
module.exports=搜索组；

您是否希望您的

组件didmount

代码在更改组后再次运行？我最终没有使用此代码。但对于未来的观众来说，要让它发挥作用，你需要在发生变化时再次从你的商店取货。