Reactjs 嵌套反应<；输入>；元素失去了对类型的关注

我有：

• 组件

  App

  和子组件

  Filter

• 子对象需要在父对象中改变状态，这是通过
  执行的

• handler

  是父级在子级上设置的

  prop

到目前为止一切都很好

但是，只要按下输入上的a键，它就会失去焦点。我猜它正在被摧毁和重新渲染

如果我将

过滤器

组件提升到

应用程序

的某个级别，并将其从该状态中移出，那么一切都会按照您的预期工作，但显然我希望能够嵌套组件并在顶层共享状态

我猜在这个更高的级别调用setState会导致整个事件重新渲染，但我认为diffing算法足够聪明，可以避免替换

过滤器

子组件中的节点，从而避免模糊

上的焦点

我做错了什么/我如何解决这个问题？有没有更好的方法来组织这个

在这里使用JSBin:

var-App=React.createClass({
getInitialState:函数（）{
返回{
物品：[“汤姆”、“迪克”、“哈利”]，
筛选器文本：“”
};
},
setFilterText:函数（事件）{
this.setState（{filterText:event.target.value}）；
},
渲染：函数（）{
var filter=React.createClass({
渲染：函数（）{
返回；
}
});
var rows=this.state.items
.过滤器（功能（项目）{
返回this.state.filterText==“”
真的吗
：item.toLowerCase（）.indexOf(
this.state.filterText.toLowerCase（））>-1；
}.绑定（本）
.map（功能（项目）{
返回
{item}
});
返回(
过滤器：

{rows}

);
}
});
React.renderComponent（，document.body）；

您正在渲染函数中创建一个新的组件类

react的diffing算法的一部分会查看组件，如果它看到您在一个位置渲染了不同类型的组件，它会说“结构可能有很大的不同，所以我不会浪费时间对子组件进行diffing”。它抛出节点，并将新结果呈现给DOM

---

移动

var filter=React.createClass…

到某个地方，它只执行一次，而且会很好地工作。

这不是表面上看起来的样子，而是没有一个很好的自包含的工作示例，并且正在做一些有点奇怪的事情，比如在属性中存储状态（实际上是整个组件），我想。aaaaah。哦，这应该是显而易见的。谢谢此处的工作修复程序只声明一次类：

var App = React.createClass({
  getInitialState: function() {
    return {
      items: ["Tom", "Dick", "Harry"],
      filterText: ''
    };
  },

  setFilterText: function (event) {
    this.setState({filterText: event.target.value});
  },

  render: function () {
    var filter = React.createClass({
      render: function () {
        return <input value={this.props.filterText} onChange={this.props.onChange}/>;
      }
    });

    var rows = this.state.items
      .filter(function (item) {
        return this.state.filterText == ''
          ? true
          : item.toLowerCase().indexOf(
              this.state.filterText.toLowerCase()) > -1;
      }.bind(this))
      .map(function(item) {
        return <li>{item}</li>
      });

    return (
      <div>
        Filter: <filter filterText={this.state.filterText}
          onChange={this.setFilterText}/>
        <ul>
          {rows}
        </ul>
      </div>
    );
  }
});

React.renderComponent(<App />, document.body);