我想讓我的onBlur處理程序在點擊某個按鈕時做一些不同的事情

Question

我有一個組件A，它接收焦點並傳遞一個onBlur處理函數。我旁邊還有一個按鈕。我希望onBlur for A在點擊按鈕時失去焦點，而不是在DOM的任何其他位置丟失焦點時做一些不同的事情。我該如何做？

Answer 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> 
     ); 
    }, 
});