Question

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

如果我用setTimeout（，0）括起模糊，它会起作用。但为什么原版不起作用？

<!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>

已解决：我在componentWillUpdate中触及了DOM，然后由render（）中的React恢复。这就是React应该做的事情。

Answer 1

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

componentWillUpdate中的模糊不会触发，react.js

1 个答案: