javascript - 当兄弟节点的 "display"属性更改时，为什么 React 组件的 onClick 事件处理程序不触发？

Question

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

问题

我们有 3 个组件，一个父 Form 组件，它有 2 个子组件，一个 Input 和一个 Button。该按钮同时注册了 onMouseDown 和 onClick 处理程序。 Input 注册了一个 onBlur 处理程序。如果您聚焦 Input，然后单击按钮，Button 的 onMouseDown 将触发，然后是 Input 的 onBlur。 onBlur 触发父 Form 组件的重新呈现，以更新其 CSS 类。根据 jsFiddle 中的 CSS 规则，这个新的 error 类导致作为 Input 和 Button sibling 的 div 变得可见。 .似乎更改此 CSS 规则是导致 Button 的 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;
}

Answer 1

click 事件是一次 mousedown 后跟一次 mouseup，不会离开或更改元素。

如果元素在 mouseup 之前移动，或者你在 mouseup 之前在按钮上放置了一些东西，或者鼠标在 mouseup 之前移动，或者你在 mouseup 之前手动重置了 input.focus()，或者……

...还有什么...

然后就没有点击了。