React Antd异步获取节点属性的坑 react event.persist()

如果在react中想异步访问事件属性（如在setTimeout内）

应该在是处理事件时调用event.persist()

这会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。

注意:面对异步时,普通值(可继承下来)和节点属性(续特殊处理才能继承下来)

注意:ES6的箭头函数是没有this和arguments的,如果想快捷使用arguments需要使用function式

例如:

	//节流函数
	const throttle = (fun, delay) => {
        let valid = true
        return function () {
            if (valid) {
                let args = arguments  //因为setTimeout是全局,所以要提前保存args
                args[0].persist()
                setTimeout(() => {
                    fun.apply(this, args)
                    valid = true
                }, delay);
            }
            valid = false
        }
    }
    
    //测试函数
    const rushMore = (e) =>{
    	console.log(e.target)
    }
    
    //获取属性的地方
    <Select
       allowClear
       showSearch
       onPopupScroll={(e)=>{console.log(e.target)}}	//看这里,一般我们可以这样获取到节点属性
    >
    	{...}
    </Select>
    
    
    //但是我们采取异步的手段
    onPopupScroll={throttle(rushMore,500)}	//假如我们没有在节流中延时处理前使用	event.persist()
    //那么,我们将会获取不到这个节点,会输出null
    //这是因为由于延时异步,我们的节点参数并没有像普通的值参数一样被继承下来
    
    //但是如果我们使用了,那么就可以很好的继承下来