为什么当同级节点的“display”属性发生更改时，React 组件的 onClick 事件处理程序不会触发

我们遇到了一个问题，不确定我们做错了什么。我们在这里重新创建

问题

父表单组件，它有 2 个子组件，一个输入和一个按钮。该按钮已注册onMouseDown和onClick处理程序。输入已注册onBlur处理程序。如果聚焦输入，然后单击按钮，按钮的onMouseDown将触发，然后是输入的onBlur。onBlur触发父表单组件的重新呈现，以更新其 CSS 类。这个error的新类会导致输入和按钮的同级div变得可见，根据 jsFiddle 中的 CSS 规则。看来，此 CSS 规则的更改是导致按钮的onClick处理程序永远不会触发的原因。如果您尝试再次单击该按钮，它将按预期工作。

有人知道这里会发生什么吗？

这是JS代码：

    var state = {
    messages: []
}
var MessageCenter = React.createClass({
    messages: function () {
        return this.props.messages.map(function (message, i) {
            return <div key={i}> {message}</div>
        })
    },
    render: function () {
        return <div>
            <h3>Events</h3>
            <div>{this.messages()}</div>
        </div>
    }
})
ReactDOM.render(
    <MessageCenter messages={[]}/>,
    document.getElementById('messageCenter')
)
function printMessage(message) {
    state.messages.push(message)
    ReactDOM.render(
        <MessageCenter messages={ state.messages }/>,
        document.getElementById('messageCenter')
    )
}
var Button = React.createClass({
    handleClick: function (event) {
        this.props.handleClick(event)
    },
    handleMouseDown: function (event) {
        printMessage('Button Mouse Down handled')
    },
    render: function () {
        printMessage('Button Rendered')
        return <div>
            <button onClick={ this.handleClick } onMouseDown={ this.handleMouseDown }> Click Me</button>
        </div>
    }
})
function updateForm(className, errorMessage) {
    ReactDOM.render(
            React.createElement(Form, {
                className: className,
                errorMessage: errorMessage
            }),
            document.getElementById('container')
    )
}
var Form = React.createClass({
    getInitialState: function () {
        return {
            showButton: false
        }
    },
    classNames: function () {
        return this.props.className
    },
    handleButtonClicked: function (event) {
        printMessage('Button Click handled')
        updateForm('success', '')
    },
    handleBlur: function (event) {
        printMessage('Input Blurred')
        updateForm('error', 'Why did the buttons onClick handler not ever run?')
    },
    showChild: function (event) {
        this.setState({
            showButton: true
        })
    },
    button: function () {
        if (this.state.showButton) {
            return <Button className="" handleClick={ this.handleButtonClicked }/>
        }
    },
    render: function () {
        printMessage('Parent Rendered')
        return <div>
            <div className={ this.classNames() }>
                <input onBlur={ this.handleBlur } onFocus={ this.showChild }/>
                <div className="error-message"> { this.props.errorMessage } </div>
                { this.button() } </div>
        </div>
    }
})
ReactDOM.render(
    <Form className="" errorMessage=""/>,
    document.getElementById('container')
)

和 CSS：

body {
  font-family: sans-serif;
}
#instructions,
#content {
  width: 50%;
  float: left;
}
#messageCenter,
#container {
  margin-top: 10px;
  width: 100%;
}
#messageCenter div,
#container div {
  padding: 5px 0px;
  width: 300px;
  margin: 0 auto;
}
.error {
  border: solid 1px red;
}
.success {
  border: solid 1px green;
}
div.error-message {
  display: none;
}
.error div.error-message {
  display: block;
}