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

I want my onBlur handler to do something different if a certain button is clicked

本文关键字：程序 不同的事 处理 onBlur 单击 按钮 我的 我希望 如果      更新时间：2023-11-01

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

您可以检查触发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>
        );
    },
});
相关文章：