似乎HTMLElement.blur使用componentWillReceiveProps在HTMLElement.focus调用时无法正常工作，尽管class App extends React.Component {
constructor(props) {
super(props);
this.state = {
index: 0
};
}
componentWillMount() {
document.addEventListener("keydown", e => this.handleKeyDown(e));
}
handleKeyDown(e) {
let index = this.state.index;
switch (e.which) {
case 40: // up arrow
index = Math.max(0, index - 1);
break;
case 38: // down arrow
index++;
break;
}
this.setState({index});
}
render() {
return (
<div>
<SearchBox index={this.state.index} />
<p>Index: {this.state.index}</p>
</div>
);
}
}
class SearchBox extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.index === 0) {
console.log('focusing');
this.textbox.focus(); // this works
} else {
console.log('blurring');
this.textbox.blur(); // this doesn't
}
}
render() {
return (
<input type="text" ref={n => this.textbox = n} />
);
}
};
实际 工作。
简单的repro案例（使用babel的es2015）：
AcitonBar我创建了一个显示意外行为的JSBin here。
有人对此有解释吗？我有什么关于反应生命周期的东西，我误解了吗？
答案 0 :(得分：1)
似乎这确实是错误的生命周期钩子。
当我重新阅读文档时发现了这个金块：
正在更新：componentDidUpdate
void componentDidUpdate(object prevProps, object prevState)在将组件的更新刷新到DOM后立即调用。初始渲染不会调用此方法。
将此作为在更新组件时对DOM进行操作的机会。
来自here
我将相关代码移至componentDidUpdate，现在一切正常。