單擊正文以改變狀態，以響應關閉下拉菜單

Question

我寫了一個簡單的下拉菜單，因爲我想要不同的樣式並對行爲有更多的控制，但現在我被困在使用戶點擊其他地方時關閉下拉菜單身體或其他元素。我如何用純粹的反應來實現這一目標？

var Hello = React.createClass({ 
    getInitialState() { 
    return { 
     openDropdown: false 
    } 
    }, 

    toggleDropdown: function() { 
    this.setState({ 
     openDropdown: !this.state.openDropdown 
    }) 
    }, 

    render: function() { 
    return (
     <ul> 
     <p onClick={this.toggleDropdown.bind(this)}>Select</p> 
     <div className={this.state.openDropdown ? 'show' : 'hide'}> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     </div> 
     </ul> 

    ) 
    } 
}); 

https://jsfiddle.net/1z5zpqeo

Answer 1

組件時負載添加事件偵聽到身體。

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

closeDropdwn: function() { 
    this.setState({ 
    openDropdown: false, 
    }) 
}, 

Answer 2

我改名爲你的狀態更好的理解，也改變了你對渲染到UL的div，li元素不應該比UL任何其他元素裏面。

此外，更多的分裂，所以它更容易調試，如果需要。

var Hello = React.createClass({ 
    getInitialState() { 
     return { 
      isOpenDropdown: false //rename for better understanding 
     } 
    }, 

    toggleDropdown: function(e) { 
     if(e && ReactDOM.findDOMNode(this.refs.dropdown).contains(e.target)) { 
      return; //Ignore click if it was inside the dropdown 
    } 
    this.state.isOpenDropdown ? this.closeDropdown() : this.openDropdown() 
}, 

openDropdown: function() { 
    document.addEventListener("click", this.closeDropdown); 
    this.setState({ 
     isOpenDropdown: true 
    }); 
}, 

closeDropdown: function() { 
    document.removeEventListener("click", this.closeDropdown); 
    this.setState({ 
     isOpenDropdown: false 
    }); 
} 

componentWillUnmount: function() { 
    if(this.state.isOpenDropdown){ 
     document.removeEventListener("click", this.closeDropdown); 
    } 
} 

render: function() { 
    //Changed "div" to "ul" -- LI should never be inside any element other than UL. 
    return (
     <div> 
     <p onClick={this.toggleDropdown.bind(this)}>Select</p> 
     <ul className={this.state.isOpenDropdown ? 'show' : 'hide'}> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     </ul> 
     </div> 

     ) 
} 
});