在componentWillUpdate不触发时模糊

为了使代码清晰，我删除了不必要的代码。完整的独立html文件如下所示。当按下键时，我期望输入失去焦点，但实际上它没有。

如果我用setTimeout(， 0)包围blur，它将工作。但是为什么原来的不行呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
   </head>
<body>
<div id="root">
</div>
<script type="text/babel">
    class HelpBox extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            };
            window.addEventListener("keydown", this.keyDown.bind(this), false);
        }
        componentDidMount() {
            this.refs.searchWord.focus();
        }
        componentWillUpdate(nextProps, nextState) {
            console.log('will blur', this.refs.searchWord);
            this.refs.searchWord.blur();
        }
        keyDown(e) {
            this.setState({});
        }
        render() {
            return <div>
                <input key="search" ref="searchWord" className="search" type="text"
                />
            </div>
        }
    }
    ReactDOM.render(
            <HelpBox/>,
            document.getElementById('root')
    );
</script>
</body>
</html>

resolve:我在componentWillUpdate中触摸了DOM，然后由React在render()中恢复。这就是React应该做的LOL

keydown事件将默认触发blur和focus事件。如果没有setTimeout，您的this.refs.searchWord.blur()将在默认的focus之前执行，因为this.refs.searchWord.blur()在堆栈中。使用setTimeout，您的this.refs.searchWord.blur()将被放入队列中，这意味着您的this.refs.searchWord.blur()将在默认的focus和堆栈中的其他函数之后执行。如果您不熟悉堆栈、队列和事件循环，请查看这个视频

相关内容

最新更新

热门标签：