2回答

张轩

2019-06-06

已采纳

同学 你好 你代码写的非常细心 注释完美 给你点个赞  

我在章节 5-6 完成了这个功能，你可以看看我是怎么做的。

你找的帖子很好的讨论了这个问题，核心思想就是 React 的事件已经采取了代理的形式，总体是绑在 document 上面的一个事件，所以当你只是使用 e.stopPropagation() 的时候，没有什么用，document 上面那个 click 还是会被调用，冒泡没有被阻止。所以 React 又推出了 你说看到的 e.nativeEvent.stopImmediatePropagation()，这个可以帮助其他在 root 上面绑定的 DOM 事件被调用。

Use Event.stopImmediatePropagation to prevent your other (jQuery in this case) listeners on the root from being called. It is supported in IE9+ and modern browsers.

0

1

慕斯6088333

所以在应用上 是react 相关的用e.nativeEvent.stopImmediatePropagation()，而js，jqeury 等非react代码处用 e.stopPropagation() 来实现～对嘛。

2019-06-06

共1条回复

慕斯6088333

提问者

2019-06-06

constructor(props){
super(props)
        this.state = {
            isOpenDropDown: false,
            selectedYear: this.props.year,
            selectedMonth: this.props.month
}
        this.stopPropagation = this.stopPropagation.bind(this);
}

    /**
     * Add listener when MonthPicker has constructed 
     * Listen all the click event on this page 
     *  
     */
componentDidMount() {
        document.addEventListener("click", this.hideAndSubmit)
}

    /**
     * When the user clicks other area, 
     * close the dropDown list and invoke the callback function
     */
hideAndSubmit = (event) => {
        event.preventDefault();
        this.setState({
            isOpenDropDown: false
})
        this.props.onChange(this.state.selectedYear, this.state.selectedMonth)
}

/**
     * Use Event.stopImmediatePropagation to prevent your listeners on the root from being called. 
     * It is supported in IE9+ and modern browsers.
     * @param {*} event 
     */
stopPropagation(event) {
        event.nativeEvent.stopImmediatePropagation();
}

toggleDropdown = (event) =>{
        this.stopPropagation(event);
        event.preventDefault();
        this.setState({
            isOpenDropDown: !this.state.isOpenDropDown
})
}

部分代码如上。 

0

0