嵌套的React <input>元素失去了对键入的关注

Question

我有:

• 一个组件App与子组件Filter.
• 孩子需要在父母中改变状态,而这正是通过父母进行的<input onChange={handler}>.
• 该handler是prop是对孩子由家长设定.

到目前为止都很好.

但是,只要在输入上按下某个键,它就会失去焦点.我认为它正在被摧毁并重新渲染.

如果我将Filter组件提升到一个级别并将其App驱动到该状态,那么一切都按照您的预期运行,但显然我希望能够嵌套组件并在顶层共享状态.

我想在这个更高级别调用setState导致整个事情被重新渲染,但我认为diffing算法足够聪明,以避免替换Filter子组件中的节点,从而避免模糊焦点<input>.

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

在这里工作JSBin:http://jsbin.com/fexoyoqi/10/edit？html,js,output

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);

Answer 1

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

react的diffing算法的一部分看着组件,如果它看到你在一个点上呈现了一个不同的类型组件,它说"结构可能明显不同,所以我不会浪费时间来分散孩子".它抛出节点,并将新结果呈现给DOM.

移动var filter = React.createClass...它只执行一次,它会工作正常.