React输入文本在重新渲染器上失去焦点

Question

我正在使用react，希望输入文本显示内存数据存储中的值，然后在值更改时更新存储，从而触发重新渲染。我看到的问题是，我的输入文本在重读时失去了焦点。我已经尝试设置key属性，覆盖shouldComponentUpdate并返回false，以防止react重新为组件命名，但没有效果。不管怎样，后者似乎不是一个好的长期解决方案。

从文档：

请注意，在未来的React中，可能会将ashidComponentUpdate（）视为提示而不是严格的指令，返回false可能仍然会导致组件的重新渲染。

代码：

export class TextInput extends React.Component {
  constructor(props) {
    super();
    this.storePath = props.value;
    const value = dataStore.get(this.storePath) || '';
    this.state = { value };
  }

  shouldComponentUpdate() { return false; }

  update(event) {
    dataStore.update(this.storePath, event.target.value);
  }

  render() {
    return <input type="text" value={this.state.value} onChange={e => this.update(e)}/>;
  }
}

编辑

我正在使用react路由器。

const App = props => (
  <Router history={browserHistory}>
    <div>
      <Switch>{
        Array.from(this.routeMap.keys()).map(path => {
          const viewFn = this.routeMap.get(path);
          return <Route key={path} path={path} render={viewFn}></Route>;
        })
      }</Switch>
    </div>
  </Router>
);

有一个顶级组件通过路由拉入，它使用my TextInput组件。

Answer 1

我找到了。每次我调用ReactDOM。render我正在重新说明我的顶级组件函数，这似乎导致我的输入文本失去焦点。它必须对传递的组件函数/类进行身份检查，以查看它是否与前一个相同，如果与前一个相同，则完全从头开始重新加载。

因此，以下是如何避免这样做：

const render = props => {
  const App = props => (
    <Router history={browserHistory}>
      <Switch>
        <Route key="/login" path="/login" render={() => View(props)}/>
      </Switch>
    </Router>
  );
  ReactDOM.render(
    <App {...props}/>,
    rootDiv
  );
}

render();
render();

在此处输入JSIDLE：https://jsfiddle.net/chwsmchd/

以下是正确的方法：

const App = props => (
  <Router history={browserHistory}>
    <Switch>
      <Route key="/login" path="/login" render={() => View(props)}/>
    </Switch>
  </Router>
);

const render = props => {
  ReactDOM.render(
    <App {...props}/>,
    rootDiv
  );
}

render();
render();

正确的JSIDLE：https://jsfiddle.net/gzzpmpbz/