Question

我正在使用react并希望输入文本显示来自内存数据存储的值，然后在存储值改变时更新存储，这会触发重新呈现。我看到的问题是我的输入文本不再关注重新渲染。我已经尝试设置key属性并覆盖shouldComponentUpdate并返回false以防止重新呈现组件，但无济于事。无论如何，后者似乎不是一个好的长期解决方案。

来自文档：

请注意，将来React可能会将shouldComponentUpdate（）视为提示而不是严格指令，并且返回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)}/>;
  }
}

修改

我正在使用反应路由器。

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

有一个顶层组件通过路由引入并使用我的TextInput组件。

Answer 1

我找到了。每当我调用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();时，我都在重新声明我的顶级组件功能，这似乎会导致我的输入文本失去焦点。它必须对传递的组件函数/类进行身份检查，看它是否与前一个相同，如果不是，则从头开始完全重新发布。

所以，这里 NOT 的方式如下：

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

在这里失败的jsfiddle：https://jsfiddle.net/chwsmchd/

这是正确的方法：

{{1}}

纠正jsfiddle：https://jsfiddle.net/gzzpmpbz/

反应输入文本失去了重新注册的重点

1 个答案: