在用例中无法理解onBlur / onFocus事件

Question

我对以下代码有疑问。 React组件的行为是正确的，但我想改进组件的结构，并理解它的工作原理。

预期行为：

• 输入焦点并点击按钮=＆gt;提交行动
• 输入重点并点击背景=＆gt;松散的焦点
• 输入未聚焦，点击按钮=＆gt;专注于输入

.container {
    display: flex;
}
.input__opened {
    background-color: white;
}
.input__closed {
    background-color: lightgray;
}
.button {
    background-color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.4/ReactRouter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.6.3/redux-form.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

this.textInput.focus()
//setTimeout(() => { this.textInput.focus() }, 0)

问题：

首先，我很难理解为什么如果我使用setTimout（）函数来延迟它在工作的执行堆栈中的焦点。如果我在没有setTimout（）的情况下调用焦点函数，则行为完全不同。

使用以下选项：

//this.textInput.focus()
setTimeout(() => { this.textInput.focus() }, 0)

不起作用并触发以下事件堆栈（单击按钮而没有输入字段中的焦点）

• 的onfocus
• 呈现
• 的onblur
• 呈现

（我不明白为什么这个onBlur会触发）

相反，如果我们使用：

{{1}}

调用堆栈具有以下形式：

• 呈现
• 的onfocus
• 呈现

另一方面，我想知道是否建议使用React进行此类UI交互。