如果单击某个按钮，我希望我的 onBlur 处理程序做一些不同的事情答案

【问题标题】：I want my onBlur handler to do something different if a certain button is clicked如果单击某个按钮，我希望我的 onBlur 处理程序做一些不同的事情
【发布时间】：2016-07-20 22:15:42
【问题描述】：

我有一个组件 A，它接收焦点并传递一个 onBlur 处理程序。我旁边还有一个按钮。如果在单击按钮时失去焦点而不是在 DOM 上的其他任何地方失去焦点，我希望 A 的 onBlur 做一些不同的事情我该怎么做？

【问题讨论】：

显示你尝试过的代码。

标签： javascript reactjs typescript

【解决方案1】：

您可以检查触发 onBlur 的单击的 DOM 元素是否是按钮，如下所示：

const ComponentA = React.createClass({
    propTypes: {
        onBlur: React.PropTypes.func.isRequired,
    },

    componentDidMount: function() {
        document.addEventListener('click', this.onAnyClick);
    },

    componentWillUnmount: function() {
        document.removeEventListener('click', this.onAnyClick);
    },

    onAnyClick(event) {
        const container = this.refs.container;  // DOM element
        let isClickedOutside = true;  // initialization
        const eventTarget = event.target;  // DOM element
        let elem = eventTarget;
        while (elem !== null) {
            if (elem === container) {
                isClickedOutside = false;
                break;
            }
            elem = elem.offsetParent;
        }
        if (isClickedOutside) {
            this.props.onBlur(eventTarget);
        }
    },

    render: function() {
        return (
            <div ref="container">
                {/* component elements */}
            </div>
        );
    },
});

const Button = React.createClass({
    getElement: function() {  // public method
        return this.refs.element;  // DOM element
    },

    render: function() {
        return (
            <input ref="element" type="button" value="Click me" />
        );
    },
});

const ParentComponent = React.createClass({
    onComponentABlur(eventTarget) {
        if (eventTarget === this.refs.button.getElement()) {
            // do something if button was clicked
        } else {
            // do something else
        }
    },

    render: function() {
        return (
            <div>
                <ComponentA onBlur={this.onComponentABlur} />
                <Button ref="button" />
            </div>
        );
    },
});

【讨论】：