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

您在渲染功能中创建了一个新的组件类。

部分反应的差异算法会查看组件，如果它看到你在一个地方渲染了一个不同的类型组件，它就会说＆＃34;结构可能会有很大不同，所以我赢了浪费时间让孩子们倦怠＃34;它抛出节点，并将新结果呈现给DOM。

将var filter = React.createClass...移动到仅执行一次的位置，并且它可以正常工作。

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

1 个答案: