我正在使用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组件。
答案 0 :(得分: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/